{"id":15254,"date":"2012-10-22T21:01:27","date_gmt":"2012-10-22T13:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15254"},"modified":"2025-04-04T01:13:09","modified_gmt":"2025-04-03T17:13:09","slug":"scalable-vector-graphic","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic\/","title":{"rendered":"A Look into: Scalable Vector Graphics (SVG)"},"content":{"rendered":"

Vector graphics<\/a> have been widely applied in print media<\/a>. In a website, we can also add vector graphics with SVG or Scalable Vector Graphic<\/strong>. Citing from the official spec at W3.org<\/a>, SVG is described as:<\/p>\n

A language for describing two-dimensional graphics in XML. SVG allows for three types of \u00dfgraphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.<\/em><\/p>\n

It has actually been around since 1999<\/a> and as of 16 August 2011, it became a W3C Recommendation<\/a>. Yet, SVG is still considerably underused, whereas there are a lot of advantages in using Vector rather than Bitmap to serve graphic or image on a website.<\/p>\n

SVG Advantages<\/h2>\n

In term of serving graphics on websites, SVG offers a few advantages over Bitmap, some of which include:<\/p>\n

Resolution Independent<\/h3>\n

Bitmap\/raster graphic is resolution dependent<\/a> \u2013 it is built upon pixels. Graphics served will looked pixelated when it is resized at a certain zoom level. That doesn\u2019t happen to vector graphic, which is resolution independent<\/a> in nature, as the graphic is expressed with a mathematical equation which makes it scalable at any zoom level while maintaining quality<\/strong>, even at Retina Display<\/a>.<\/p>\n

Reducing HTTP Request<\/h3>\n

SVG can be embedded directly into an HTML document with svg<\/code> tag, so the browser does not need to do a request to serve the graphic. This also results in better load performance for the website.<\/p>\n

Styling and Scripting<\/h3>\n

Embedding directly with svg<\/code> tag will also allow us to style the graphic easily through CSS<\/a>. We can change object properties<\/strong> such as background color, opacity, borders, etc the same way we do with regular HTML tag. Similarly, we can also manipulate the graphic via JavaScript.<\/p>\n

Can be animated and Edited<\/h3>\n

SVG object can be animated when it uses the animation element or through JavaScript Library like jQuery. The SVG object can also be edited with any text code editor or a graphic software like Inkscape<\/a> (which is free<\/a>) or Adobe Illustrator<\/a>.<\/p>\n

Smaller File Size<\/h3>\n

SVG has a smaller file size<\/a> compared to Bitmap, that has a similar graphic presentation.<\/p>\n

Drawing Basic Shapes with SVG<\/h2>\n

According to the spec, we can draw some basic shapes<\/a> like the rectangle, circle, line, ellipse, polyline and polygon<\/strong> with SVG and in order for the browser to render the SVG graphic, all those graphic elements need to be inserted within the <svg> ... <\/svg><\/code> tag. Let\u2019s see the examples below for more details:<\/p>\n

Line<\/h3>\n

To draw a line<\/strong> in SVG we can use the <line><\/code> element. This element is used to draw a single straight line, so it will only consist of two points, start<\/strong> and end<\/strong>.<\/p>\n

\r\n <svg>\r\n <line x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\/>\r\n <\/svg>\r\n <\/pre>\n
As you can see above, the line start point coordinate is expressed with the first two attributes x1<\/code> and x2<\/code>, while the line\u2019s end point coordinate is expressed with y1<\/code> and y2<\/code>.<\/p>\n
There are also two other attributes, the stroke<\/code> and stroke-width<\/code> which are used to define the border\u2019s color and border\u2019s width, respectively. Alternatively, we can also define these attributes within an inline style, like so:<\/p>\n
\r\n style=\"stroke-width:1; stroke:rgb(0,0,0);\"\r\n <\/pre>\n
it eventually just does the same.<\/p>\n
<\/figure>\n