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 y axis.
<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.
Using SVG filters, as seen in this post by Paul Irish, you can achieve the desired effect in your HTML5.
The ability to create user interfaces based on vector is a reason why Flash was popular with designers and developers. But due to the changing screen resolutions of mobile devices and tablets, developers are looking for more efficient ways to provide UI components without compromising the content’s quality.
To learn more about the other benefits of using SVG on your web properties, read this post at CreativeBloq.
Tutorials and inspiration
SVG – Introduction
This Youtube video is a visual tutorial of what has been mentioned above and more. Aside from this video, Jacob Jenkov has created a 13-video series about other aspect of SVG that you can view here. Topics include browsers display SVG, the SVG coordinate system, and more. A must-see tutorial for beginners.
SVG can be edited using Notepad or graphics editing software. In this tutorial, you will learn how to create a SVG file using Adobe Illustration and how to embed the file in your web page. It deals with the step-by-step process of modifying the options from Illustration and taking the XML code of the file onto your HTML page.
Using SVG with HTML5 tutorial
This comprehensive Wiki entry covers the basic aconcepts between using SVG on HTML5. Includes how to embed SVG with different tags (img, ojbect, and iframe), using SVG image tag to adapat SVG graphic, and more.
The SVG tutorial includes changing attribute values and CSS properties, animating SVG shapes, and more.
Once on the page, you can refer to the left sidebar for more SVG tutorials.
HTML5 Tutorials #19 – SVG Inline and CSS Styling
This tutorial proves why SVG is an easy tweak in your HTML and CSS styling that makes a big difference in your web page’s performance.
jQuery SVG Tutorial Plugin & Tutorials with Example
THE ULTIMATE GUIDE TO SVG
The latest and arguably the best guide for SVG, author Ezequiel Bruni covers the basics and advanced techniques on how to use SVG the best way. Includes best practices, additional tutorials and how-tos, and tools, among countless others.
Final thoughts: SVG is a very useful image file extension to create more dynamic and interactive content without compromising its quality. Strange thing is that not a lot of designers are familiar with using SVG. With this post, we hope that you have a better understanding on how to use and why you should implement SVG in your website and content.
More on scalable vector graphics:
Author: Christopher Jan Benitez
Content marketer during the day. Heavy sleeper at night. Dreams of non-existent brass rings. Writer by trade. Pro wrestling fan by choice (It’s still real to me, damnit!). Family man all the time.