Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exporting SVG graphics

From: Illustrator for Web Design

Video: Exporting SVG graphics

On the web today, we have to understand that the devices which are accessing our content no longer have just a standard 72-pixel-per-inch screen. In fact, many of them exceed even 300 pixels per inch, such as the case with Apple's iPhone, iPad, and even now the MacBook Pro. One solution to this resolution dilemma is to use a graphic format known as SVG, or Scalable Vector Graphic. SVG offers us a truly resolution-independent way of displaying our graphics on the web, and it does so by using XML to define the basic properties of the image, like paths, shapes, fonts, and even colors.

Exporting SVG graphics

On the web today, we have to understand that the devices which are accessing our content no longer have just a standard 72-pixel-per-inch screen. In fact, many of them exceed even 300 pixels per inch, such as the case with Apple's iPhone, iPad, and even now the MacBook Pro. One solution to this resolution dilemma is to use a graphic format known as SVG, or Scalable Vector Graphic. SVG offers us a truly resolution-independent way of displaying our graphics on the web, and it does so by using XML to define the basic properties of the image, like paths, shapes, fonts, and even colors.

This is perfect for UI elements, icons, logos, patterns, or even backgrounds that need to be scaled differently in order to display correctly on a wide range of devices. You design it once and use it anywhere, at any scale, at any resolution. How cool is that? In addition to its scalability though, SVG also has bandwidth-friendly files. No matter how big the graphic becomes, the only data that's actually transmitted to the browser is the XML that's attached to the file. This makes the file size much smaller than any rendered graphic at that size.

There are some use cases where SVG cannot be used, however, like photographs for instance. This is because SVG simply can't match a photograph pixel for pixel in terms of detail. Anything else is fair game though. When it comes to browser compatibility, SVG is supported by the big ones, like Firefox, Chrome, Safari, and Opera. But you'll probably notice one big name missing from that list. Yeah, that's right. As usual, Internet Explorer does not support SVG. But don't worry. There are plenty of other ways around that, which you can find through a quick Google search, ways of using JavaScript, and other methods to embed SVG files so that they work properly inside of Internet Explorer.

As most mobile devices use some variation of the WebKit browser, you're good to go when it comes to that platform, so don't worry about mobile. Now, let's jump in here and take a look at how we can export in SVG out of Adobe Illustrator. In previous versions of Adobe Illustrator, you were able to Save for Web directly to an SVG. However, in Illustrator CS6, SVG has been stripped out of the Save for Web dialog box and placed simply in the Save As dialog box. So if I go to the File menu and I choose Save As, I'll select my desktop here, and underneath the Format, I can choose SVG.

So, when I do that-- I'm just going to call this Robot. And once I'm ready to save it, I'll click Save, and it comes up with my SVG Options. You'll get to pick between your SVG profiles here at the top, and underneath that, you'll get a description telling you this specifies the desired SVG XML type documentation. And here all you need to worry about is just sticking with the default. If you want to use an older version, you can, but you don't have to do that at all. In this case, I'm just going to stick with this.

The Fonts, this is a little bit of a different story. When you hover over this, it says, "This font format produces the best visual fidelity for displaying text. The Adobe SVG Viewer can display text using this format. However, not all viewers support this format." If you select SVG, it tells you here that this is the standard W3C SVG font format. It is supported by all of the viewers, meaning all the browsers, but it doesn't produce the best visual fidelity for small text due to the lack of font hinting.

If you want to be compatible with everything, you can, but you don't have to be. Finally, Convert to Outline. If you do that, this will convert all of the active text in your document to outlines upon export. It tells you here that even though the visual fidelity of small outline text may not be accurately preserved by choosing this. So my suggestion would be to experiment with this a little bit. Try it out with the Adobe Viewer: export it, and then open it up in all your browsers. Try it with the SVG: open it up, test it in all your browsers. And then finally, try converting it to outlines.

In most cases, you're going to be converting your type to outlines before you render it out anyway, especially if you've been sharing this with other colleagues and clients, as they might not have those fonts in their system. If you do that, you're pretty much good to go. So in this case, I'm going to keep it on Adobe CEF for now. You can choose a subsetting if you want to. You don't have to though. Each time you hover over these, by the way, it gives you a little description down at the bottom on what that means. Options, Image Location: this specifies the locations of images referenced in the document. Do you want to embed those images directly inside of the SVG or do you want to link to them? When you hover over the link, that tells you here that link documents to images exported from the original Illustrator file.

This is useful for multiple SVG files that share common raster elements. Images are saved as JPEGs with no alpha channel or PNGs with an alpha channel. In this case, I'm going to choose to embed into my file. If you would like to preserve Illustrator capabilities, that just means that if you're going to make future changes to this, preserving Illustrator editing capabilities will be helpful to you, because then you can open up the SVG file and make changes to it later. However, if you preserve Illustrator editing capabilities, chances are you are going to increase the file size a little bit as well, so I'm going to leave that turned off for now.

If you want to see more options, you can click here, and there are several different options that you have available to you. For now, I'm just worried about the basic options though, so I'm going to collapse this by choosing Less Options. And then finally, once I'm ready to this, I can either launch my web browser to preview it. So I'll click here, and that will launch my browser, and there it is right there, and if I were to move this or scale it around, I can't really do that here. But it looks pretty good from where I'm standing, so I'm pretty happy with it. I'll go back to Illustrator and I'll hit OK. Now, that should have saved the SVG to my desktop, and if I go in my web browser now and open this up, I can select it and open it, and there it is: the SVG file just as it's supposed to be.

Now, if you're looking for some tips on how to optimize your SVG graphics, Adobe's help documentation on Illustrator SVG is very good and very extensive, especially when it comes to setting up your SVG files for proper export and also applying different SVG effects, and even adding interactivity as well. So, if you want to check that out, that's help.adobe.com, and go to the Illustrator section and do a search for SVG, Scalable Vector Graphic. So, hopefully by now you have a better understanding of what a SVG graphic is, how it works, why it's useful, and how we can use that to better display graphics on a wide variety of devices and screens.

Show transcript

This video is part of

Image for Illustrator for Web Design
Illustrator for Web Design

67 video lessons · 25407 viewers

Justin Seeley
Author

 
Expand all | Collapse all
  1. 1m 13s
    1. Welcome
      50s
    2. Using the exercise files
      23s
  2. 43m 51s
    1. Designing for screens
      1m 57s
    2. Decoding screen size and resolution
      2m 40s
    3. Exploring the Illustrator to HTML workflow
      3m 42s
    4. Setting up Illustrator for web work
      6m 55s
    5. Creating a new document for web
      6m 25s
    6. Creating a new document for mobile
      3m 31s
    7. Using artboards for responsive layouts
      7m 42s
    8. Creating email newsletter documents
      4m 31s
    9. Working with Pixel Preview and anti-aliasing
      6m 28s
  3. 25m 28s
    1. Adjusting color settings
      6m 47s
    2. Understanding web color
      3m 47s
    3. Creating a color palette
      5m 4s
    4. Creating custom swatches
      4m 50s
    5. Working with fills and strokes
      5m 0s
  4. 13m 15s
    1. Exploring the Layers panel
      5m 21s
    2. Renaming and grouping layers
      7m 54s
  5. 24m 5s
    1. Drawing simple shapes
      4m 16s
    2. Working with Pathfinder
      5m 4s
    3. Using the Shape Builder tool
      4m 33s
    4. Creating symbols
      6m 24s
    5. Editing and replacing symbols
      3m 48s
  6. 20m 22s
    1. Planning your project
      2m 56s
    2. Using guides and rulers
      5m 56s
    3. Developing a layout with shapes
      6m 21s
    4. Using a grid system
      5m 9s
  7. 25m 53s
    1. Exploring the rules of typography
      4m 1s
    2. Using text as text vs. using text as an image
      3m 37s
    3. Understanding web-safe fonts
      1m 46s
    4. Creating and using paragraph styles
      5m 16s
    5. Creating and using character styles
      3m 2s
    6. Simulating the CSS box model
      8m 11s
  8. 21m 17s
    1. Understanding object appearance
      4m 43s
    2. Applying and editing live effects
      3m 34s
    3. Creating and using drop shadows
      3m 13s
    4. Creating more flexible rounded rectangles
      3m 17s
    5. Saving appearance as graphic styles
      6m 30s
  9. 35m 57s
    1. Starting with a wireframe
      5m 23s
    2. Adding master elements
      6m 45s
    3. Creating navigation buttons
      13m 34s
    4. Working with photographs
      5m 50s
    5. Simulating pages with artboards
      4m 25s
  10. 54m 45s
    1. Creating video placeholders
      10m 33s
    2. Creating buttons
      13m 1s
    3. Creating form fields
      8m 15s
    4. Creating radio boxes and checkboxes
      5m 11s
    5. Creating progress bars
      10m 12s
    6. Creating tabbed interfaces
      7m 33s
  11. 35m 28s
    1. Understanding slicing
      3m 26s
    2. Slicing up a mockup
      3m 6s
    3. Understanding web file formats
      5m 33s
    4. Exploring the Save for Web dialog
      3m 50s
    5. Optimizing photographs
      4m 29s
    6. Optimizing transparent graphics
      4m 43s
    7. Saving Retina display graphics
      3m 46s
    8. Exporting SVG graphics
      6m 35s
  12. 9m 29s
    1. Understanding image sprites
      3m 4s
    2. Creating a sprite grid
      4m 36s
    3. Optimizing sprites for the web
      1m 49s
  13. 15m 29s
    1. Placing Illustrator Smart Objects
      3m 22s
    2. Sharing color swatches between apps
      2m 9s
    3. Exporting Illustrator artwork as a PSD
      3m 49s
    4. Importing artwork into Fireworks
      2m 41s
    5. Exporting HTML from Illustrator
      3m 28s
  14. 1m 19s
    1. Taking the next step
      1m 1s
    2. Goodbye
      18s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Illustrator for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.