Scalable Vector Graphics, or SVGs, are XML based, responsive vector graphics that can be easily edited in code. Because they are XML based they are scalable, compressible and searchable. They allow for endless interactivity and animation and have a variety of web and digital applications. SVGs are supported by every modern web browser and can be edited in any text editor. They are a great tool for creating responsive, high quality web graphics without dealing with the file size issues that accompany high quality JPG, PNG or GIF files.
Converting to SVG
Any Adobe Illustrator file can be made into an SVG, as can files made in other drawing programs. There are also several websites that provide free file conversion into SVGs. Converting a JPG, PNG or GIF into an SVG is complicated for programs and success varies. Converting a photo into an SVG will have little to no effect, regardless of the original file format or program used. If converting a JPG, PNG or GIF into an SVG, most online converters separate distinct shapes into different layers and make them scalable without losing quality. This is the closest programs can get to creating a vector graphic from a rasterized file. This method is best used as a place-holder and allows time to convert your JPG, PNG, or GIF into an actual vector file using Adobe Illustrator, another drawing program, or a free online program like Inkscape. If you are converting an AI, EPS, or any vector file into an SVG, these online conversions will closely maintain the original color and vector data and conversion should go smoothly.
Implementing the SVG File
When implementing the SVG, you can easily insert an SVG file with a normal <img> tag. The image will be a responsive, high quality vector graphic that will look good at any magnification or on any monitor. SVG files can also be exported as code, allowing a vector graphic to be made in Illustrator and implemented and edited within your code. This allows the unique opportunity to style the vector graphic without moving back into your drawing program. SVG images are also great in that they provide the opportunity for animation. By creating anchor tags for individual elements you can easily create gif-like CSS animations for your graphics. SVG elements are styled and animated in CSS and scripted in JavaScript.
SVGs have an immense amount of exciting applications. Consider this your introduction! If you want more information on SVGs or if you think Scalable Vector Graphics might be right for your new website, contact Informatics Inc.
