Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Adobe Illustrator for Web Design Save for the Web SVG Graphics

DIJITUL UK
DIJITUL UK
17,246 Points
Posted by DIJITUL UK
DIJITUL UK
17,246 Points

No responsive check box when saving as SVG?

At first I thought it was because we are using different versions of Illustrator, but after previewing it in the browser, it simply acts like a normal image.

How do I get this button to appear? I'm on CS6

3 Answers

elk6
elk6
22,916 Points

Hi Olly,

This option isn't in CS6, unfortunately.

I've seen more options in this course that are only there in CC. They might have added that.

Fortunately, it's still just an svg, so it will be scalable and you can make it responsive with your css.

  • Elian
DIJITUL UK
DIJITUL UK
17,246 Points
DIJITUL UK
DIJITUL UK
17,246 Points

Thank you for the quick reply :)

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Can you give an example Elian Kloppenburg of how you would make the SvG responsive with CSS ?

elk6
elk6
22,916 Points

Sure. If you save it as an SVG ( not inline svg, so just an image and no code ) you can do the same as any other image. Just use:

img {
    width: 100%;
    height: auto;
}

If you are using inline SVG wrap it in a div with a class. Give the SVG an aspectratio after the viewbox and style it with some css.

Take a look at this codepen I made with a responsive inline SVG: http://codepen.io/McSuckelaer/pen/RrJWgj