adriengibrat / I-love-SVG.md

title: I ❤ SVG author: name: I'm Adrien, frontend developer email: [e-mail] theme: ./theme controls: false output: index.html

--

I ❤ SVG

--

What is it ?

Old format from 1999 [Scalable Vector Graphics](https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics)

With few evolutions and versions in 2001 & 2011

Wide browser support only some advanced feature not well supported

--

It's responsive

<iframe height="100%" style="width: 100%;" scrolling="no" title="Responsive SVG Logo Composition" src="https://codepen.io/tylersticka/embed/yOjNpY?theme-id=light&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Responsive SVG Logo Composition by Tyler Sticka (@tylersticka) on CodePen. </iframe>

--

Really responsive

With simple media-queries

Source: Codrops - Sara Soueidan, 2014

--

Vector means zoomable (infinitly)

<iframe height="100%" style="width: 100%;" scrolling="no" title="SVG Pan, Zoom and Rotate" src="https://codepen.io/osublake/embed/oGoyYb?height=265&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen SVG Pan, Zoom and Rotate by Blake Bowen (@osublake) on CodePen. </iframe>

--

It's lightweight & loads lightning fast

Simple markup like HTML

Compression works like any other textual asset

Please, use SVG OMG [to optimize SVG](https://jakearchibald.github.io/svgomg/)

--

So it's perfect to await loading

<iframe height="70%" style="width: 100%;" scrolling="no" title="SVG Loader Animation" src="https://codepen.io/nikhil8krishnan/embed/preview/rVoXJa?theme-id=light&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen. </iframe>

More @ https://samherbert.net/svg-loaders/

--

And first screen delightfull animations

<iframe height="100%" style="width: 100%;" scrolling="no" title="SVG Loader Animation" src="https://codepen.io/dsenneff/embed/preview/2c3e5bc86b372d5424b00edaf4990173?theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen CodePen Home Animated SVG Avatar v2 by Darin (@dsenneff) on CodePen. </iframe>

--

More ?!

List of [SVG animation demos](https://www.hongkiat.com/blog/svg-animations/)

Tutorial about [how to animate SVG](https://la-cascade.io/svg-style-et-anime-avec-css/)

Video about [animating SVG with CSS](https://www.youtube.com/watch?v=gWai7fYp9PY)

--

It's also perfect for Icons

<iframe height="100%" style="width: 100%;" scrolling="no" title="SVG Icons" src="https://codepen.io/rgg/embed/yOWZWN?height=265&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen SVG Icons by Rafael González (@rgg) on CodePen. </iframe>

--

With apps that allow to create sprite

like icomoon, or fontastic...

that offers clear tutorials

and endless collections of high quality logo & icons.