Mozilla Hacks | What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4 @mozhacks | Uploaded 6 years ago | Updated 22 hours ago
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
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
