SVG stands for scalable vector graphics, which are graphics for the web. In this video, review what SVG files are and how they are used. Explore defining SVG files with XML code, and see how they are generally created in Illustrator.
- [Instructor] What are SVG files? They are scalable, meaning they can be sized large, small, anywhere in between without degrading in quality. They're vector graphics, they're not bitmap images, and they're graphics, and they can be created with Adobe Illustrator. SVG files are vector graphics in the sense that they're defined with anchors and paths, not dots like bitmap images.
That means the exact same artwork that you create for a t-shirt can be used on a billboard. Now, that's valuable for print, but it's even more valuable for the web, where you're designing for an infinite array of environments, resolutions, and screen sizes. JPEG files, GIF files, and PNG files are raster or bitmap format. If you've got to place a photo in your webpage, use one of them, probably JPEG or PNG, but don't use a vector SVG file for a photo.
That's not what they're built for. But, here's the downside to raster images. They degrade when they're zoomed, they require very high resolutions to work well on modern high resolution screens and SVG on the other hand, is the only vector format that's supported natively in any browser. So, if you hand an SVG file off to a web designer, that file will work for them and it will work for anyone who wants to view that image on the internet.
SVG files are defined with XML code. Now, you don't need to worry about that, it's just background information. The code on the right, for example, defines the bar chart that you see in the upper right hand corner of the screen. What you should be aware of is the fact that you are producing XML code, makes it easy for animators and scriptors to plug in your illustration. It makes it easy to embed live data in your illustration and it makes it easy to style your illustration in HTML or CSS.
The best way to create SVG graphics is in Adobe Illustrator. Basic flow is this. You create the artwork in Illustrator, and then you have four basic options. You can save your artwork as an editable SVG file, which means you can open it in Illustrator, edit it and send that very same file to a web designer. Two, you can save your artwork as a noneditable SVG file. That makes the file size a little smaller, but it means you can't open it and edit it in Illustrator.
Third, you can export a noneditable SVG file and I'll be going into the distinctions between these in future videos, in quite a bit of detail. Finally, Illustrator allows you to just grab the SVG code that I just showed you and share it with the designer as code.
- What are SVG files?
- Embedding SVG files in a webpage
- Setting up an SVG-friendly environment in Illustrator
- Scalable transparency and gradients
- Applying SVG filters
- Generating links with scalable, programmable image maps
- SVG typography
- Saving as SVG
- Exporting to SVG
- Publishing Illustrator SVG images on the web