Screencast Build a Web Page With SVG HTML/CSS

  • Alyssa Nicoll


  1. ssss4 said

    If you don't want to deal with all of the code together, then you might want to install Brackets. Once your in Brackets then you can down load the Beautify extension. A little tricky to use but it's worth it.

  2. ssss4 said

    It's more about spacing and making sure that all of your tags are on different lines but every little bit counts. Also the W3validation can check if a file doesn't exist yet. It will bug a little if you have your about your attribute if their like this v=""v, v ="v" or v = "'v.Dose't work with css or javascript. but there is a jslint extention that is the same thing for javascript . Also works with SVG files.

  3. ssss4 said

    Another thing about Brackets is that it has Live Preview.

  4. Faculty

    Alyssa Nicoll said

    NOICE @ssss4 ! Is Brackets free/paid?

  5. Roman Rott said

    Hi! Having animated blood on the logo is cool, but note that transition animation on SVG will not work in Safari if you put the image inside a link. I have faced with this issue recently and spent a lot of time investigating it. Here are the description and one of my solutions:

  6. Faculty

    Alyssa Nicoll said

    @rrott Bloody Brilliant!!! Bwah! So punny!

    Seriously, great post Roman. Tweeting it now ;D

  7. Roman Rott said

    Cool! Thank you, @Alyssa

  8. Kecskés Krisztián said

    You are the best guys!

  9. Maz Hermon said

    Thanks for that! You mentioned a great accessibility article you'd just read re svg with aria and said you'd link below in the notes. Can't see it so just checking you remembered that? Sorry if I missed it :)

  10. Rane Wallin said

    Fun video. Thanks.

  11. Denver Prophit Jr. said

    @alyssanicoll When would you use data uri's?

  12. Janice Medina said

    @maz On the overview page for the main course, at the bottom, there's are Additional Resources. The second one listed is Maybe that's one you're looking for.

  13. Student #4708203 said


About This Screencast

In this episode, we will expand upon what we learned from the You, Me & SVG course and demonstrate when it's best to use SVGs in your web apps. We will look deeper into full-width headers, animating SVG images, and creating lockups.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now