Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
When working with embedded SVGs and styling them with CSS, it's possible to add media queries and create responsive images. This is helpful for SVGs that contain lots of fine detail that might not look good at smaller sizes. In a mobile-first approach, the detail is first removed, and then added back in along the spectrum of larger screen sizes.
Resources
Browser Compatibility
Browser support for SVGs is generally good. However, there are a few issues to be aware of in Internet Explorer, particularly that SVGs are only supported in IE 9+. Read more about SVG browser support at caniuse.com.
SVG and Illustrator Files
Here are the SVG and Adobe Illustrator files used in this course. If you're using Workspaces with this course, there is no need to download these files; they are just listed here in case you prefer to use another text editor.
Free Vector Drawing Tool
If you're looking for an alternative to Adobe Illustrator, here is a free vector drawing tool that works in a web browser. You can go to File > Save Image to save the drawing as an SVG.
Related Courses
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up