|Find best graphic designers at http://urartstudio.com|
Scalable vector graphics (SVG for short) let designers create high-quality images using XML by describing two-dimensional graphics.Users associated graphic files with JPEG and GIF. But the advantage that SVG has over these most popular graphic file extensions is that it retains its quality when zoomed in or out using your desktops or tablets. As a result, SVG prints in higher resolution and is easier to compress compared to other file types. More importantly, unlike any other image file, SVG can be edited using Notepad since it is made using XML.
SVG has been around as early as 1999 with companies like Apple and Abode developing this new file format. But in 2001, SVG was retooled to include mobile profiles and other features.
SVG was first supported by web support in 2004 by Konqueror. All browsers supported SVG in 2011. There is mobile support for SVG but other smartphones accommodate SVG Tiny, which has other features that SVG doesn’t have like non-scaling strokes.
Like any markup languages, the SVG element requires an opening and closing tag (or self-closing) so it shows properly on your browsers:
Specify the width and height of the element so that it will have a predefined size. Without indicating its width and height, the SVG will occupy as much space as it can.
<svg width="100" height="100"/>
By entering the number for each axis, the browser will interpret this as pixels or px. You can enter measuring units such as pt, mm, em, cm, and in.
You can create basic shapes using SVG with rect, circle, ellipse, line, and other tags.
<rect width="100" height="25"/>
Specify the coordinates of the SVG element in your page by indicating the x and yaxis.
<rect x="50" y="50" width="100" height="25"/>
In this command, the rectangle will appear 50 pixels away from the default position, horizontally and vertically.
For the circle tag, use cx and cy to determine the coordination of the circle’s center in the page. Use r to specify its radius.
<circ cx="50" cy="50" r="50"/>
For other commands for basic shapes, style, and layering and drawing order, read this informative post by Scott Murray.
Benefits of using SVG
Aside from its high-resolution, small file size, and ability to be edited using a markup language, SVG is also easier to load on your browser. Instead of requesting the server for JPEG or GIF files to be loaded onto the browser, SVG can be embedded in the HTML of the page. This reduces HTTP request by the browser to the server, which means faster and more efficient loading of your site.