SVG first came around in the 1990’s and was first named the ‘ugly duckling file format’, that became a beautiful swan. It’s was at the beginning poorly supported and very much ignored for most of the 2000’s.
So what is SVG and how do you use it?
SVG is a Vector graphic format, its an image format used to display images on the internet and other platforms, but all in all SVG files are nothing more than plain text files that describe lines, curves, text, and shapes.
Files in this format use an XML based text format to show how the image should appear. One of the good things regarding an SVG file is they can be scaled to different sizes without them losing quality, this is why nowadays website images are used in the SVG format.
Using an SVG file its widely supported by popular web browsers like Chrome and Firefox etc. They are also supported by W3C (World Wide Web Consortium). They are also supported by high-end graphics editors such as Coral Draw. The main use of an SVG file is to share your graphics on the internet.
How do you use an SVG file?
You can use the SVG file the same way you would any other image by using the HTML pasting it into your webpage. This is a good way as it allows you to keep the original size of the SVG file. It’s known that SVG is becoming more popular and designers prefer to use SVG because they can scale it to size.
SVG images are actually written in XML, which means the source code can be changed at any time by using programming skills. They are also accessible via client side scripts which allows for Java developers to play around with the image.
You have a number of ways you can use SVG files, Inline SVG seems to be very popular, this is when you take the content of the file and choose to put it into your mockup. SVG sprites, this is when designers get the opportunity to include an SVG by referring to its ID.
Editing your SVG file
To edit SVG files most use Coral draw or Adobe Illustrator, both have great tools and are easy to use if you wish to edit your file. They are both good but Adobe Illustrator does have a number of fantastic tools and options. Lots of graphics packages contain an SVG sprite generator. One of the most popular questions is why should you use an SVG file over a PNG file, well for the main reason you’ve much better resolution, but also you’ve other reasons such as speed, animation, practicality and SEO. Most designers will always prefer to use SVG.