#SVG #WebDesign

What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4

by Mozilla Hacks

In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the only vector image format for the web. It has unique abilities that let us create awesome graphic effects and it's actually easier to create than you think.

If you're interested in learning more about SVGs, you can learn the basics of SVGs here in MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

It's free and designed for people just getting started.

Want to sign up for the Mozilla Developer Newsletter? Get web development tips and tricks for devs of all levels: https://www.mozilla.org/en-US/newsletter/developer/

Web Demystified is a video series from Jeremie Patonnier designed to introduce the web in a way that's easy and understandable.

In Episode #0, we offered an overview of what the web is and how it works. Watch Episode 0 here: https://www.youtube.com/watch?v=O_GWbkXIqEY&list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g

In Episode #1, we offered an overview of HTML. Watch that here: https://www.youtube.com/watch?v=PORRrz3Y8Vc&list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g&index=2

In Episode #2, we looked at CSS and checked out how it styles pages. Watch that here: https://www.youtube.com/watch?v=Y02yI1OfZjI&index=3&list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g

In Episode #3, we checked out JavaScript and investigated what some have called "the most misunderstood language." Watch that here: https://www.youtube.com/watch?v=09XmbByy6Sk&index=4&list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g

Links from the video:
- https://codepen.io/MyXoToD/post/howto-self-drawing-svg-animation
- https://css-tricks.com/gooey-effect/
- https://tympanus.net/Development/ElasticSVGElements/collapseexpand.html

Social links:
https://twitter.com/MozHacks
https://twitter.com/MozDevNet

Music:
Take Me Higher by Jahzzar under license CC-BY-SA

Live chat

Sign in to chat
user's avatar