<svg>

Wat ken je ermee?

Hallo, Linux Nijmegen!
Joris Zwart logo

Scalable Vector Graphics

?
SVG's tekenen
Inkscape, AI
Maar schept dat plezier?
In deze presentatie:
1. DHZ mét code
2. Over SVG
3. DHZ via code
4. Tips & instinkers

Deel I

Doe het zelf mét code
Opfriscursus HTML & XML

<h1>
  Linux Nijmegen
</h1>

<p>
  Linux user group
</p>
 

Linux Nijmegen

Linux user group

Doe je mee?

Ingrediënten

1 Teksteditor
1 Internetbrowser
1 Portie geduld
        
<svg viewBox="-25 -25 50 50">

  <!-- je code hier -->
   

</svg>
Daar gaan we!
<circle r = "10"/>
Grafische primitieven
Kleur!

Stroke & fill

<circle
  r = "10"
  fill = "lime"
/>
        
<circle
  r = "10"
  fill = "lime"
  stroke = "#f9f4f2"
/>
        
<circle
  r = "10"
  fill = "lime" stroke = "#f9f4f2"
  stroke-width = "3"
/>
        
<circle
  r = "20"
  fill = "lime" stroke-width = "2"
  stroke-dasharray="9,5"
  stroke-dashoffset="0"
/>
Opfriscursus wiskunde
Coördinatenstelsel

(100, 50)

<line x1="50" y1="100" x2="175" y2="25"/>

<circle r="35" cx="100" cy="50"/>

Animatie!

Deel II

Over SVG
Tekst-gebaseerd

Letterlijk open source!

0000  89 50 4e 47 0d 0a 1a 0a  .PNG....
0008  00 00 00 0d 49 48 44 52  ....IHDR
0010  00 00 01 2c 00 00 00 96  ...,....
0018  01 00 00 00 00 4c 20 88  .....L .
0020  7f 00 00 00 35 49 44 41  ....5IDA
....  .. .. .. .. .. .. .. ..  ........
0068  4e 44 ae 42 60 82        ND.B`.  
<svg viewBox="0 0 50 35"
     fill="transparent"
     stroke="#f9f4f2">

  <rect width="40" height="20" x="5" y="7.5"/>

</svg> 
Vector-gebaseerd

(en dus schaalbaar)

Wanneer gebruiken?
Tekeningen
Logo's
Iconen
Bestandsgrootte
Commodore logo
Commodore logo static
Bestandstype Grootte
SVG 720 bytes
GIF 6.609 bytes
WebP 18.856 bytes
JPEG 45.812 bytes
PNG 46.463 bytes
Commodore logo animated
Bestandstype Grootte
SVG 1.687 bytes
MP4 152.875 bytes
Animated GIF 274.251 bytes

Deel III

Doe het zelf via code 
<html>
  <body>
    <svg></svg>

    <script>
    ...
    </script>
  </body>
</html>
CCC

Create, configure, connect

// create

NS = 'http://www.w3.org/2000/svg'
svg = document.querySelector('svg')
circle = document
    .createElementNS(NS, 'circle')
        
// configure

circle.setAttribute('cx', 50)
circle.setAttribute('cy', 75)
circle.setAttribute('r', 50)
        
// connect

svg.append(circle)

Deel IV

Tips & instinkers
Browserondersteuning
Test, test, test!
Veiligheid
Animaties

SMIL, CSS or JavaScript?

SVGOMG

(protip)

joriszwart.nl/svg