Základy SVG

SVG (Scalable Vector Graphics)

  • Standard definovaný W3C
  • Vektorový formát definovaný jako XML
  • Využívá DOM (co dalšího...?)
  • "Lidsky čitelný formát"
  • Můžeme animovat - jak objekty, tak jednotlivé atributy
  • Jaké jsou vlastnosti vektorových formátů?
  • Výhody oproti jiným formátům?

Příklad

<html>
    <body>

        <h1>My first SVG</h1>

            <svg width="100" height="100">
              <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" 
              fill="yellow" />
            </svg>

    </body>
</html>

Systém souřadnic

https://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html

Základní elementy

  • Rectangle
  • Circle
  • Ellipse
  • Line
  • Polygon
  • Polyline
  • Path
  • Text

Rectangle

<rect x="400" y="100" width="400" height="200"
 fill="yellow" stroke="navy" stroke-width="10" />

https://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement

Circle

<circle cx="600" cy="200" r="100"
 fill="red" stroke="blue" stroke-width="10" />

https://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement

apod...

Path

<path d="M 100 100 L 300 100 L 200 300 z"
 fill="red" stroke="blue" stroke-width="3" />
  • d = "path data"
    • moveto (M vs. m)
    • closepath (Z nebo z)
    • lineto (L vs. l)
    • Beziérovi křivky atd.

https://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html

Text

 <text x="250" y="150" 
  font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
 </text>

https://www.w3.org/TR/2011/REC-SVG11-20110816/text.html

Práce s SVG v Inkscapu

SVG a QGIS

Made with Slides.com