SVGs, or Scalable Vector Graphics, have been around for quite some time. They are an XML-based format for 2D graphics that can do pretty cool things on the web. So if you’ve been using JPEGs, PNGs and GIFs and loving life, why would you possibly want to learn about another image format? Here’s the deal. SVGs are amazing on the web. There are so many things that are possible through them that JPEGs and PNGs can’t even come close to, like animation and scalability. SVGs are more versatile because you're telling the browser to create the graphic as opposed to just displaying it. Since the browser is creating it, you'll be able to manipulate it in ways that aren't possible with other image formats. The reason that they’re not as popular, at least why they haven’t been in the past, is that they have a bit of a learning curve that isn't there with other image or graphic formats. A great way to use responsive SVGs is through icon design. You can create an intricate design for larger screens and then create something less intricate for a small screen. With an SVG you only have to upload the file to the server once, so instead of having to create a different icon for a large screen, tablet and phone, you'll be able to, through CSS, tell the browser what parts of the graphic you'd like to display at each screensize. To learn more about creating responsive SVGs, as well as animating them, check out our course Creating Responsive SVG in Illustrator and CSS. When you create an SVG, you're really creating some code that will tell your browser how to draw your graphic. If you're creating a graphic in a program like Illustrator, when you save it, it actually creates the code that the browser will use based upon what you made. Here's a simple graphic that I've created with Illustrator. It's a circle with a black stroke inside a square of the same color that also has a black stroke. To make this an SVG instead of a JPEG or something else, all you have to do is choose Save As and save your work as an SVG. Once you select SVG and click save, a dialog box will open. You're able to see the code that Illustrator will generate for you in by clicking the SVG Code button in the dialog box. A browser window will open and you'll see the code that you've generated pop up there. This is what the code will look like in your browser. I've highlighted the parts that are relevant in purple. The lines above the purple section are not necessary for you to put in your HTML, or to even keep in your SVG file. They're generated by Illustrator, but they don't really serve a purpose. You should see some words in there that look familiar, like circle, fill and stroke. So if we take that code that was generated and plug it into Codepen, it'll generate the exact same SVG that we saved from our Illustrator file! (Toggle between Result and HTML to see the SVG code and then the graphic created). Seeing how the graphic you created is made with code to be able to be created by the browser is pretty neat.

See the Pen pveBgv by Callie (@calliemarie) on CodePen.

Now that you're familiar with SVGs, be on the lookout for later posts with other ways to generate an SVG and how to manipulate them with CSS.