SVGs can be used as standard image files or included inline with HTML and styled with CSS. In this video, you experiment with inline SVGs and CSS.
- [Instructor] Now that we've talked a little bit…about how SVGs are created, let's see it in action.…If you have access to the exercise files,…download them now if you want to follow along.…I'll be starting with the files…contained in the "begin" folder.…If you're using an SVG image file…that you didn't write the markup for,…how do you access the code?…It's pretty simple, actually.…All you have to do is open the SVG file in any editor.…I'll be using Atom.…In the SVG file itself, we can see the SVG tag,…which wraps the entire image.…
There's also a path tag, which contains…the coordinates of the image on line 10.…We'll be looking at how to add this SVG code in-line…into our HTML page, so the first thing you need to do…is copy this entire block of SVG code.…Then we'll open our HTML file,…and paste it in underneath this comment on line 13.…Now, let's open this HTML file in any modern browser.…I'll be using Chrome.…Don't forget to save your file.…
And there's our dog.…Now, let's go back to the editor and add some CSS.…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
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.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.