A Glimpse of Scalable Vector Graphics (SVG)
SVG is the W3C standard for vector graphics. The first iteration of SVG standard released in 2001, and since then it gained a lot of traction and has been adopted in all major browsers. SVG could be thought of as analogous to HTML since it can be manipulated by CSS and JavaScript. That said, working with SVG can be difficult. In this post, I will give an overview of SVG, and how we use it in our products at Social Tables.
Before working for Social Tables I had never used SVG. At first working with SVG could be very frustrating, but once you understand the power of SVG, there won’t be any other graphic solution comparable to it. For developers who are new to SVG, svg-edit is a very useful and simple open source SVG manipulation tool. While creating a basic shape such as a circle or a rectangle is pretty straightforward, <path> and <polygon> elements have a higher learning curve due to their complexity.
Basic Shapes
Drawing basic shapes with SVG is not complicated. Circles, rectangles, ellipses and lines are predefined elements in SVG standards. Here is a basic circle code for a circle: <circle cx=”0" cy=”0" r=”100"/> . This simple code draws 100 pixel radius circle at coordinates 0,0.
After drawing a simple circle, let’s create a fancier rectangle : <rect width=”200" height=”100" rx=”20" ry=”20" style=”fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>
You could manipulate SVG like an HTML element by adding style attribute.
No Quality Loss
The banana palm below is taken from our Social Tables application. As you can see, the quality of the image do not change even I scaled the banana palm ten times. Zooming, scaling or resizing does not cause any quality loss.
Use Case : SVG at Social Tables
We use SVG heavily in our core products at Social Tables. Our products would not be as useful if we did not harness the power of SVG. SVG gives us the power to create scalable and complex diagrams, while continuing look like HTML. To give you an idea what we do at Social Tables, I added a simple screenshot of our most used product Venue Mapper — beloved by our customers.
Everything you see in the above screenshot is basically a SVG element: numbers, chairs, tables, avatars and even checked boxes.
We use SVG path element in our latest product Table and Buffet Designer to generate shapes dynamically.
The <path > element basically draws a continuous line controlled by coordinates. The following line generates the shape we use for a serpentine-shaped table in our product. Here is the code for the single serpentine shaped table:
It basically starts from coordinates 0,0 with command M and draws an elliptical arc to coordinates 84, 0. From the endpoint of the arc, draw a line with the L command to coordinates 63, 21. With another arc and another line we created an enclosed shape. As you can see it is not difficult to draw a complex looking shape, the difficult part is calculating meticulously where each point starts and ends. It is time to recall your high school math.
A Wide Range Uses
If you have used data visualization libraries in the browser, it is most likely you used SVG one way or another. Most of charting libraries use SVG. If you would like to see wild capabilities of SVG , checkout 20 examples of SVG that will make your jaw drop. Also, it is very clever to generate QR codes with help of SVG since it could perfectly scale.
SVG makes my life easier at Social Tables. Don’t hesitate dive into SVG if you need a graphics solution in your next project.
