The SVG (Scalable Vector Graphics) file format was developed by the World Wide Web Consortium (W3C) to provide a royalty-free, vendor-neutral standard for vector graphics on the Internet.
It represents a significant improvement over the previous raster or bitmap images. W3C set SVG as the standard in 1999 and continues to be the source of 2D graphics.
The Scalability of SVG
One of the most valuable features of SVG is that the graphic/image can be scaled without compromising the quality. Magnifying or reducing an image usually does not affect its resolution and detail. The image should maintain its crisp edges and be accessible through the browser.
The scalability of SVG is crucial in today’s markets. These days, websites must be responsive, clearly displaying the desired information on everything from desktop monitors to handheld devices.
With SVG, website graphics can be mobile-friendly. This means any graphics on the page can change size according to the size of the screen being viewed.
With SVG, one image is all that is necessary for a responsive design, so there is no need for multiple copies of the same image in different sizes.
The Web Performance of SVG
SVG is also quite versatile. The graphics can be animated, adding interest and value to the content. Filters can also be applied, and the whole thing can be controlled with scripting.
See the Pen SVG Sprite Animation by Mark Nelson (@marknelson) on CodePen.
The predominance of SVG on internet content is often underestimated. On some websites, such as Google Search, the search-type tabs allow users to select between text, image, video, and so on, and all use SVG icons, as you can see in the screenshot below.
The red highlighted code is the SVG code for those icons.
Another less interactive function of SVG is in many of the graphics found on websites. This can include the company logo, icons (as we saw above), or vector pattern fills in the page background.
Using SVG
A developer can use any of the below tools to create SVG graphics.
- Adobe Illustrator
- Adobe Photoshop
- Corel Draw
- Inkscape
In addition, all major browsers support SVG, including:
Visit here to learn more about browser support.
You can create a graphic in Adobe Illustrator and convert it to SVG or style it with CSS at a later date.
Some of the special effects may not make it through the transition, so sometimes it is necessary to experiment with such effects as gradients and blending modes.
The more intricate and complicated the image becomes, the bigger the file gets, which defeats one of the purposes of using SVG.
If you have a large SVG file and wish to optimize its size for a better performance read this step-by-step tutorial. How to optimize an SVG file step-by-step.
A Pointers to Keep In Mind
As web design evolves, the use of vector graphics will affect a website’s load time and performance. If the developer can do as much work as possible with this file format, then web performance will be enhanced because only one image has to be downloaded. A mixture of tools and images from different sources will require a separate download for each image, which most consumers have little patience for.
With vector graphics, the content can be saved as an SVG file. Be careful when transferring a graphic in Adobe Illustrator to older versions of Photoshop because the graphic may be converted to a raster image. This increases the file size and reduces scalability.
The SVG images can also be saved on a spreadsheet for easier access.