Join Brian Wood for an in-depth discussion in this video Adding SVG inline, part of Making Your Site Retina-Ready.
- Another method for adding SVG to your webpages,…aside from inserting via an image tag,…is to add the XML code directly inline…in the HTML or even CSS.…And this is actually pretty useful if you want to access…the content within the SVG to do things like--…If you look right here, to maybe change…this shape's CSS fill or to animate something…using CSS animation or perhaps JavaScipt…It's really just a matter actually of just…opening the SVG file in your editor…and copy paste the code in your page.…
So in this video we'll take a look at how to add inline.…Some of the things you need, some you don't.…And see how it can open doors to accessing…the content via CSS and scripting.…So on the main page here on this website…hidpi.brianwoodtraining.com, I got an example.…This is actually inline SVG.…And if I go take a look at the dev tools here,…you're gonna see that it's actually SVG inline.…Literally inline.…And what I've done is I've actually gone through and said,…"Ok, the blue one here--"…If you look up top, let me close this.…
- What is HiDPI?
- Adding your first icon font
- Adding hover states and animation
- Working with SVG files
- Creating favicons
- Displaying HiDPI images
Skill Level Intermediate
Creating Icon Fonts for the Webwith James Williamson3h 56m Intermediate
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 47s Beginner
Design the Web: Using Symbols in SVGwith Chris Converse20m 31s Beginner
Photoshop and Illustrator: Creating Retina Graphicswith Justin Seeley1h 11m Intermediate
1. Introducing HiDPI or Retina
What is HiDPI (retina)?9m 16s
2. Icon Fonts
5. HiDPI Images
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.