A guid on working with SVG's in an artistic fashion

1. SVG's and their potential
for programmatic art
or cool backgrounds etc. if that's your thing.
Michael Senkow

4. Getting into the Magic of SVG's...
And, What is an SVG anyways?

5. What is an PNG?
And other raster image formats
Perfectly ok image type
and sometimes actually
smaller in size
But doesn't scale
getting image issues
And looks like this in a
text editor...

6. 8950 4e47 0d0a 1a0a 0000 000d 4948 4452
0000 0145 0000 0199 0802 0000 0091 eab4
5e00 0000 0970 4859 7300 000b 1200 000b
1201 d2dd 7efc 0000 2000 4944 4154 78da
ed9d 4d6c 1dd7 75c7 cf7c bc79 f3f8 218a
a445 4b8a 2c47 b143 3528 12d9 6e0c 386a
dc20 82e3 0036 ea2e 1215 015c b828 d2a4
41b2 a917 058a 74db 5d5b 64d5 2259 7451
6f8d 6611 4445 8118 cac2 8163 c040 0ab9
400d 5189 dd52 ac29 a9a1 687e 3cbe aff9
e8e2 5194 4991 6fce 9d77 e7ce fdf8 ff57
4920 29e2 687e 73fe e7dc 7bce f1f2 3c27
0882 94eb 834e f2ab edfe 4783 8c88 e2c0
fbcc 44e3 a9e9 68cc 3fd3 03cf 10a4 9ee4
abeb dd0f bac9 81ff fd78 e8bf 7c72 f254
1494 f833 bb3b 493c 1182 6708 52a7 f524
fbf1 9d9d 0749 de53 ec7b df3b 333d 1bfa
4224 bff3 c687 efbc f1e1 73df 3807 9e21
4811 c957 d7bb ffb1 d52f fc95 4f4e 475f
3b31 2144 72af 9310 d1cc 7c33 c483 8620
4d48 1eea 3fb6 fa97 66e3 d121 fa00 c944
f4d9 8b0b cfbe 7416 f119 8274 2179 4f9f
996c bcfc f0a4 10c9 33f3 3111 213e 4390
Not terribly useful
(maybe if you're getting
into some fun image
alteration stuff but
generally...no)

7. What is an SVG?

8. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.89 408.05">
<defs>
<style>
.cls-1{fill:#e1dfdd;}
.cls-1,
.cls-3,
.cls-4,
.cls-6,
.cls-7{fill-rule:evenodd;}
.cls-2{fill:#7bddef;}
.cls-3{fill:#c3f2f4;}
.cls-4{fill:#fae969;}
.cls-5{fill:#28c2d1;}
.cls-6{fill:#e8d441;}
.cls-7{fill:none;stroke:#8664c3;stroke-miterlimit:10;stroke-width:2.34px;}
</style>
</defs>
<title>Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_3" data-name="Layer 3">
<path class="cls-1" d="M66.94,109.48a5.38,5.38,0,0,1,5.45-6H253.31a5.36,5.36,0,0,1,5.45,6L229.79,402a6.81,6.81,0,0,1-6.64,6H102.55a6.8,6.8,0,0,1-6.64-6Z"/>
<path class="cls-2" d="M240.78,56.66,169.35,359.93a6,6,0,0,1-7.24,4.5l-11.49-2.75a6,6,0,0,1-4.47-7.27L218.85,45.69a12,12,0,0,1,6.2-
7.94L297.49.65a6,6,0,0,1,8.07,2.67l5.35,10.61a6.08,6.08,0,0,1-2.63,8.15Z"/>
<path class="cls-3" d="M91.3,175.66a5.29,5.29,0,0,1,5.41-6H232a5.31,5.31,0,0,1,5.41,6L215.66,378.9a6.86,6.86,0,0,1-6.68,6H119.72a6.86,6.86,0,0,1-6.68-6Z"/>
<path class="cls-4" d="M0,95.92a64.84,64.84,0,1,1,64.84,64.84A64.84,64.84,0,0,1,0,95.92Z"/>
<path class="cls-5" d="M189.65,169.68,146.14,354.41a6,6,0,0,0,4.47,7.27l11.49,2.75a6,6,0,0,0,7.24-4.5l44.81-190.25Z"/>
<path class="cls-6" d="M129.23,103.46H72.39a5.38,5.38,0,0,0-5.45,6l5,50.88A64.85,64.85,0,0,0,129.23,103.46Z"/>
<polyline class="cls-7" points="324.36 2.52 230.04 50.84 154.03 380.19"/>
</g>
</g>
</svg>

9. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.89 408.05">
<defs>
<style>
.cls-1{fill:#e1dfdd;}
.cls-1,
.cls-3,
.cls-4,
.cls-6,
.cls-7{fill-rule:evenodd;}
.cls-2{fill:#7bddef;}
.cls-3{fill:#c3f2f4;}
.cls-4{fill:#fae969;}
.cls-5{fill:#28c2d1;}
.cls-6{fill:#e8d441;}
.cls-7{fill:none;stroke:#8664c3;stroke-miterlimit:10;stroke-width:2.34px;}
</style>
</defs>
<title>Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_3" data-name="Layer 3">
<path class="cls-1" d="M66.94,109.48a5.38,5.38,0,0,1,5.45-6H253.31a5.36,5.36,0,0,1,5.45,6L229.79,402a6.81,6.81,0,0,1-6.64,6H102.55a6.8,6.8,0,0,1-6.64-6Z"/>
<path class="cls-2" d="M240.78,56.66,169.35,359.93a6,6,0,0,1-7.24,4.5l-11.49-2.75a6,6,0,0,1-4.47-7.27L218.85,45.69a12,12,0,0,1,6.2-
7.94L297.49.65a6,6,0,0,1,8.07,2.67l5.35,10.61a6.08,6.08,0,0,1-2.63,8.15Z"/>
<path class="cls-3" d="M91.3,175.66a5.29,5.29,0,0,1,5.41-6H232a5.31,5.31,0,0,1,5.41,6L215.66,378.9a6.86,6.86,0,0,1-6.68,6H119.72a6.86,6.86,0,0,1-6.68-6Z"/>
<path class="cls-4" d="M0,95.92a64.84,64.84,0,1,1,64.84,64.84A64.84,64.84,0,0,1,0,95.92Z"/>
<path class="cls-5" d="M189.65,169.68,146.14,354.41a6,6,0,0,0,4.47,7.27l11.49,2.75a6,6,0,0,0,7.24-4.5l44.81-190.25Z"/>
<path class="cls-6" d="M129.23,103.46H72.39a5.38,5.38,0,0,0-5.45,6l5,50.88A64.85,64.85,0,0,0,129.23,103.46Z"/>
<polyline class="cls-7" points="324.36 2.52 230.04 50.84 154.03 380.19"/>
</g>
</g>
</svg>
Which still may look scary....but really isn't.
Overall SVG object
The CSS, visual code off the svg. Can also be laid out inline. Or outside of the SVG.
Titling etc.
Overall shape of the SVG images, Grouped in the G's

10. https://codepen.io/mhsenkow/pen/NJNPBj
And then that same text can be put directly into a site and altered with code.
Here I'm showing some simple hover effects with the different pieces of the svg.

11. https://codepen.io/mhsenkow/pen/eXZmXL
Now, moving into the programmatic space of this, you can create the svg from
the base of the code environment instead of the visual program. Here for
Example I'm making a circle.

12. https://codepen.io/mhsenkow/pen/QoNbdx
And with a little looping magic and messing around with PUG …

13. And if you inspect this in code, you can copy and paste it directly into
Figma (and I think sketch, various programs approach this different).

14. Now you get into more fun when you start adding more programmatic
concepts. Lets try Math.random()
https://codepen.io/mhsenkow/pen/WmwQvm

15. And while you can't export this as an svg, you can do the same sort of
looping/script concepts with the CSS (SCSS) side
https://codepen.io/mhsenkow/pen/eXZpgZ

16. And while you can't export this as an svg, you can do the same sort of
looping/script concepts with the CSS (SCSS) side
https://codepen.io/mhsenkow/pen/drMGYw

17. And while you can't export this as an svg, you can do the same sort of
looping/script concepts with the CSS (SCSS) side
https://codepen.io/mhsenkow/pen/drMGYw

18. But you may be like, Michael what good is this, its stuck in codepen!
Well you can export it and then do whatever you want with it.