The term SVG has been creating hype for quite some time now. All of the design industry is getting rather crazy to use SVG everywhere… but do you really know what SVG is?
Of course you would know that it is a resolution independent graphic format, or in simple words it is a vector image format… but what is it actually? How does it work? What makes it different from EPS, WMF, JPG and PNG? There can be so many questions that you have in your mind but until now you’ve not found a simple article that describes all this.
So today we are sharing this article that describes what is SVG, where is it most suitable and how can you use it in web designing and graphic designing. Let’s begin.
What is SVG
SVG is the acronym for Scalable Vector Graphics. This is a file format. This is a vector image file format. Just like EPS and WMF. The graphics stored in SVG format are resolution independent, which means that these graphics can be enlarged to unlimited proportions and they will not lose quality. This is not the case with bitmap graphics, i.e. JPGs and PNGs.
SVG vs. EPS/WMF
SVG is designed by W3C (World Wide Web Consortium) and this is a vector file format that supports interactivity and animation. So web designers can use it to make CSS sprites and animated vector graphics, that’s something almost unheard of.
EPS or Encapsulated Postscript is the most favorite vector graphic format for print media users. It can be imported into almost all vector design applications, such as Adobe Illustrator, CorelDRAW and others. It’s compact and reliable. But EPS was designed for print media. SVG is designed for modern technologies.
WMF or Windows Metafile is also a good file format but it is an EPS alternative for Windows. It was designed by Microsoft in the floppy disk era. In those prehistoric days, WMF had its perks, but these days I feel EPS is more reliable.
Major Advantages of SVG Format
Now we do know that it SVG supports animations and it was designed by none other than W3C, but is there anything thing else that makes it different from rest of vector graphic formats? Yes, there is a fundamental difference and that difference is its biggest advantage.
SVG image data is not necessarily stored inside the SVG. It is stored in XML format. So if you have a green circle of 50 pixels, it will be written like this:
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="green"/>
This means that SVG files can be searched, indexed, scripted, and compressed. This is a fundamental difference from all the other vector file formats.
So will you have to use Notepad to create/edit SVG images???
Don’t worry, you don’t have to. You can draw the image using any vector editor, like Adobe Illustrator and export the image into SVG format.
How to Create SVG in Adobe Illustrator
I’m presenting a summarized version of Micheal Chaize’s tutorial that was published on Adobe Forums.
When you hit Save command in Adobe Illustrator, you don’t find SVG option in the file extensions list. Also, if you hit Save for Web command, you still don’t find SVG option… so how to find it?
You can find it when you click on Save As command. Here’s what the save dialog box looks like.
And here’s the dialog box that will pop up once you hit save.
Remember to use Profile SVG 1.1. Why? Because it is supported by all the major web browsers. More details are in the next section.
Note: You can only export SVG files in Adobe Illustrator CS6 and later versions.
How to Open SVG Images in Photoshop
Sadly, there is no direct method to import SVGs in Photoshop. But of course, where there’s a will there’s way. So the way is that you can open it in Adobe Illustrator, or if you are looking for a freeware, you can open it in Inkscape. Once the image is opened, you can save it as an EPS file or JPG/PNG file..
Once you have the EPS file, you can import that file, rasterize it and carry on with your edits.
Here’s the the same tutorial step by step:
Step 1: Open the file in Adobe Illustrator/Inkscape.
Step 2: Save it as EPS.
Step 3: Open the EPS file in Photoshop.
Step 4: Rasterize layer.
Step 5: Carry on with the edits.
Note: There are some plugins, such as SVG Kit but they are all paid plugins. You already know the free method.
How to Use SVG in Web Design
There are many perks to using SVGs in web designs. We have already covered its power of XML data that makes it searchable and indexed, there are other advantages as well. For instance it is incredibly smaller in volume. And it has all the vector graphic features so it looks gorgeous on retina displays and large, very large screens.
But the question is how you can use it for in a website.
You might have already tried adding it via <img> code but it hadn’t worked. Well, it doesn’t work in Internet Explorer 8. Older versions of Firefox, Chrome, Opera and Safari also don’t recognize SVGs using <img> code.
<img src="circle.svg" alt="A Green Circle">
There is one more way of adding SVG images. That is through <object> code.
Your final code would look like this:
<object type="image/svg+xml" data="circle.svg"> Green Logo </object>
SVG Browser Support
Here’s a compendium of SVG using <img> tag. Which browser supports it and which does not.
This chart was made by Can I Use.com
Free SVG Design Packs
Here are a few SVG design packs that you can download and start using/editing/practicing on them.
These are brilliantly designed iconsets made available for free by Dario Ferrando.
This is another masterfully designed icon pack.
I’m not sure about the SVGs in this pack. They might have PNG fallbacks, but still, you would should also know how that works.
SVG is a brilliant resource for web designers. Whether you are only a student or a beginner to intermediate level designer, you must get comfortable with SVG immediately because it can really help you excel in your job. And the best part is that learning about SVG will not cost you more than a few hours and won’t cost any money at all.
For further reading, you can check out the compendium by CSS-Tricks.