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

CSS

Posted by Michael Bates
Michael Bates
13,344 Points

SVG vs. CSS - which is better for optimization?

Hello folks! I am beginning to work on my portfolio site and plan on including social media icons made in Adobe Illustrator CC. This would allow me to save them as SVG files OR render them into functional CSS code. Which format would be best for site optimization in your opinions?

Jacob Mishkin
Jacob Mishkin
23,118 Points

What do you mean by functional CSS code?

3 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I don't have CC, can you share with us one of the code's it gives you. I'll like to see the markup to how it's doing it, and how compatible it is.

Michael Bates
Michael Bates
13,344 Points

Unfortunately I am not at home to share a snippet, but this vid I found on YouTube best explains it. You can change options to include web kits for backwards compatibility.

https://youtu.be/-cibAtAxW_g

Jacob Mishkin
Jacob Mishkin
23,118 Points

I like how there is a vendor-prefix option, but there is no way I would let CC write my code for me like that. That's just me. So far as optimization goes, any thing you do in CSS will be faster than if done in HTML like an SVG, but if you know how to optimize an SVG using SVGO or I think its SVGAwesome or something I would go with the SVG because there is so much I can do with an SVG that is amazing with CSS and no JS required. Lastly I don't want CC writing my CSS for me.

Michael Bates
Michael Bates
13,344 Points

I can totally understand that. This function has been around in Illustrator for a while but wasn't all too great.

I was planning on doing some animations using CSS for sure

Jacob Mishkin
Jacob Mishkin
23,118 Points

There is some amazing things you can do with SVG animations like this

Michael Bates
Michael Bates
13,344 Points

That's pretty cool! I plan on doing animations for Roll-over/hover states, etc. and was just if sticking to SVGs or converting them into CSS would be best for optimization reasons

Michael Bates
Michael Bates
13,344 Points
Michael Bates
Michael Bates
13,344 Points

There is an option to convert nearly any object created in Illustrator into CSS, wether it is a simple shape or a detailed illustration. You can then save it out as a CSS file or copy and paste the code into an editor

Jacob Mishkin
Jacob Mishkin
23,118 Points

Oh that's awesome, but then I'm guessing you need to use a div element for the CSS? Are all the CSS properties used compatible with all browsers?

Michael Bates
Michael Bates
13,344 Points
Michael Bates
Michael Bates
13,344 Points

I am not sure to be honest. I think the code is generated for modern browsers so you would have to allocate for it. I barely touched base with since I only discovered this function a short time ago

Jacob Mishkin
Jacob Mishkin
23,118 Points

I guess check it out and do some testing. I'm assuming the CSS might not work in IE because what does, so you might have an issue there, but go for it and see what happens.