Introduction to SVG graphics

This post is the first of a series of articles on SVG (Scalable Vector Graphic), which describes the basics of vector graphics on the site.



Vector graphics are widely used in printing. For websites, there is SVG, which, according to the official w3.org specification, is a language for describing two-dimensional graphics in XML. SVG includes three types of objects: shapes, images and text. SVG has been in existence since 1999 , and since August 16, 2011 it has been included in the recommendations of the W3C . SVG is greatly undervalued by web developers, although it has several important advantages.
')
Show all examples / Download source / Official documentation

SVG Benefits

• Scaling: unlike raster graphics, SVG does not lose in quality when scaling, so it is convenient to use it for development under retina.
• Reducing HTTP requests: when using SVG, the number of requests to the server is reduced, and the site loading speed increases accordingly.
• Styling and scripting: using CSS, you can change the graphics options on the site, such as background, transparency or borders.
• Animation and editing: using javascript, you can animate SVG, as well as edit in a text or graphic editor ( InkScape or Adobe Illustrator ).
• Small size: SVG objects weigh much less than bitmaps.

Basic SVG figures

According to the official specification, you can draw simple objects using SVG: a rectangle, a circle, a line, an ellipse, a broken line, or a polygon using the svg tag.

A simple line using the line tag with only two parameters - the starting points (x1 and x2) and the end points (y1 and y2):

<svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

You can also add stroke or stroke-width attributes or styles to set the color and width:

 style="stroke-width:1; stroke:rgb(0,0,0);" 

Demo

Broken line

The syntax is similar to the previous one, the polyline tag is used, the points attribute specifies points:

 <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> 

Demo

Rectangle

Called by the rect tag, you can add some attributes:

 <svg> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

Demo

Circle

Called by the circle tag, in the example, using the r attribute, we specify the radius, cx and cy specify the coordinates of the center:

 <svg> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

Demo

Ellipse

Called by the ellipse tag, it works like a circle , but you can set two radii - rx and ry :

 <svg> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

Demo

Polygon

Called by the polygon tag, a polygon can have a different number of sides:

 <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> 

Demo

Using editors

As you can see from the examples, drawing basic SVG shapes is very simple, but objects can be much more complicated. For these you need to use vector graphics editors, such as Adobe Illustrator or Inkscape, where you can save files in SVG-format, and then edit in a text editor. You can embed SVG using embed, iframe, and object:

 <object data="images/ipod.svg" type="image/svg+xml"></object> 

An example is an image of an iPod from the site OpenClipArt.org :

Browser Support

SVG is supported by almost all modern browsers with the exception of Internet Explorer 8 and below. But this can also be fixed by using the Raphael.js javascript library. You can convert the SVG file to the format of this library on the website ReadySetRaphael.com .



First you need to connect the Raphael.js library to the necessary page, then load the SVG file, copy and paste the generated code into the function:

 window.onload=function() { //   Raphael } 

On the page insert a div with the rsr attribute:

 <div id="rsr"></div> 

Demo

Conclusion

That's all the basics of SVG, in the following articles will be dismantled more complex examples of the use of vector graphics.

A bit of useful reading:

• An Introduction to SVG - W3 Schools
• Resolution Independent with SVG - Smashing Magazine
• Why Aren't You Using SVG? - NetTuts
• Original examples - hongkiat.com