Discover what it’s like to create code for SVG files directly in HTML. In the process, demystify the relationship between Illustrator and the SVG files you move over, or hand over, to your coders, animators, and designers.
- [Instructor] Let's walk through what's involved in setting up an essential SVG work environment, and workflow. Now this is important. Just like if you were about to do a painting you would either have watercolors, or oil paint, or acrylic set up. Well, similarly, with Illustrator, which is all things to all people you are going to want an SVG friendly environment when you start designing. That means SVG friendly units of measurement, and color modes.
It means sizing art boards for scalable SVG output, and I'll talk about what that means. It means minimizing strokes, and using symbols wherever possible. It means creating script friendly file names, and if you do all that then the process of either saving as an SVG file, or exporting to an SVG file will be much more trouble free.
The critical settings for an SVG environment are pixels as your unit of measurement. RGB as your color mode. RGB is screen friendly combination of red, green, and blue. And finally you will want to set up code friendly file names. That means no spaces, no special characters except the dash, or an underscore like project_01.
There are some particular design issues that we'll be exploring in this course that apply to SVG. First of all, SVG is for vectors. Don't use it for photos. Let's just rule that off the agenda for starters. There are other web friendly file formats that are appropriate for photos, and SVG is not. Do use SVG for any kind of illustration other than a photo. Secondly, I mentioned it, but I am emphasizing it.
Simply your illustration. Minimize paths, and effects because you want small files that you can turn over to an animator, or a designer, and that users will experience seamlessly, and quickly. There are two essential ways to take an SVG illustration, and hand it over to a web designer, or a coder. One, you can export the file as an SVG file. Now we'll be returning to these options in depth later in this course, but let me just briefly explain when you use which now.
You export when you want a simpler workflow, when you want smaller file sizes, and when it is not going to be necessary to edit the file in Illustrator. You save as an SVG file when you can afford a larger file size, when you need to take advantage of more options, and when you need a file that can be edited in Illustrator.
- 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