Vector graphics have been widely applied in print media. In a website, we can also add vector graphics with SVG or Scalable Vector Graphic. Citing from the official spec at W3.org, SVG is described as:
A language for describing two-dimensional graphics in XML. SVG allows for three types of ?graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.
It has actually been around since 1999 and as of 16 August 2011, it became a W3C Recommendation. 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.
In term of serving graphics on websites, SVG offers a few advantages over Bitmap, some of which include:
Bitmap/raster graphic is resolution dependent – it is built upon pixels. Graphics served will looked pixelated when it is resized at a certain zoom level. That doesn’t happen to vector graphic, which is resolution independent in nature, as the graphic is expressed with a mathematical equation which makes it scalable at any zoom level while maintaining quality, even at Retina Display.
SVG can be embedded directly into an HTML document with svg
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.
Embedding directly with svg
tag will also allow us to style the graphic easily through CSS. We can change object properties 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.
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 (which is free) or Adobe Illustrator.
SVG has a smaller file size compared to Bitmap, that has a similar graphic presentation.
According to the spec, we can draw some basic shapes like the rectangle, circle, line, ellipse, polyline and polygon 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>
tag. Let’s see the examples below for more details:
To draw a line in SVG we can use the <line>
element. This element is used to draw a single straight line, so it will only consist of two points, start and end.
As you can see above, the line start point coordinate is expressed with the first two attributes x1
and x2
, while the line’s end point coordinate is expressed with y1
and y2
.
There are also two other attributes, the stroke
and stroke-width
which are used to define the border’s color and border’s width, respectively. Alternatively, we can also define these attributes within an inline style, like so:
it eventually just does the same.
It’s almost similar to the <line>
, but with the <polyline>
element we can draw multiple lines instead of just one. Here is an example:
<svg><polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/></svg>
<polyline>
element has points
attributes that store all the coordinates that form the lines.
Drawing a rectangle is also simple with this <rect>
element. We only need to specify the width and height, like so:
<svg><rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></svg>
We can also draw a circle with the <circle>
element. In the following example, we will create a circle with 100
radius which is defined with r
attribute:
<svg><circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></svg>
The first two attributes, cx
and cy
are defining the circle’s center coordinate. In the above example, we have set 102
both for the x
and y
coordinate, if these attributes are not specified, 0
will be taken as the default value.
We can draw an ellipse with <ellipse>
. It works quite similar to the circle, but this time we can control specifically the x
line radius and y
line radius with rx
and ry
attribute;
<svg><ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></svg>
With the <polygon>
element, we can draw multiple sides of shapes like a triangle, hexagon and even a rectangle. Here is an example:
<svg><polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></svg>
As you can see, drawing simple objects with SVG in HTML is quite easy. However, when the object gets more complex, that practice is no longer ideal and will give you a headache.
Fortunately, as we’ve mentioned above, we can use a vector graphic editor like Adobe Illustrator or Inkscape to do the job. If you are familiar with these software, it is surely a lot easier to draw objects with their GUI rather than to code the graphic yourself in HTML tag.
If you are working with Inkscape, you can save your vector graphic as plain SVG, and then open it in text code editor. Now, you should find the SVG codes in the file. Copy all the codes and paste them inside your HTML document.
Or, you can also embed the .svg
file through one of these elements; embed
, iframe
and object
, for instance;
The results will eventually be the same.
In this example, I use this Apple iPod from OpenClipArt.org.
Regarding browser support, SVG has been very well supported in all major browsers, except in IE8 and earlier. But this matter can be solved with this JavaScript Library, called Raphael.js. In order to make things easier we will use this tool, ReadySetRaphael.com to convert our SVG code into Raphael-supported format. Here’s how.
First of all, download and include the Raphael.js library to your HTML document. Then, upload the .svg
file to the site, copy and paste the generated code inside the following load function
;
window.onload=function() { //the Raphael code goes here}
Inside the body
tag, put the following div
with rsr
id attribute;
<div id="rsr"></div>
That’s it, you’re done. Check out the example from the link below.
So that’s the basics with SVG. We hope now you have a fair understanding of this subject. It is the best way to optimize your site for any screen resolution, even for use on Retina display.
As always, if you are an adventurous person, here we have put a few more references and discussion to dig deeper into this subject.
Thanks for reading and we hope you enjoyed this post.
联系客服