SVG (Scalable Vector Graphic)

SVG(Scalable Vector Graphic) Tomáš Valahttp://sweb.cz/tvala/apg

Struktura prezentace: >Úvod do SVG > Základní objekty SVG > Text v SVG > Vyplňování objektů a obrysy > Transformace > Gradienty > Animace > Události

Úvod do SVG • jazyk pro popis dvourozměrné vektorové grafiky v XML • vyvíjí konsorcium W3C • rozeznává tři základní typy objektů (vektorové, rastrové, text) • mohou být seskupovány, transformovány a mohou na ně být aplikovány styly • obrázky mohou být interaktivní a dynamické

Struktura dokumentu 1<?xml version="1.0" encoding="ISO-8859-2" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 <svg width="300" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 4 <desc> popis dokumentu </desc> 5 <defs> definice stylů, objektů </defs> tělo dokumentu </svg>

<defs> <style type="text/css"><![CDATA[ .str {stroke:black;stroke-width:1} .blu {fill:blue} ]]> </style> </defs> <circle class="str blu" cx="30" r="20"/> Vrstvy v SVGSVG dovoluje objekty sdružovat do skupin pomocí elementu <g> Rastrové obrázky v SVG<image xlink:href="cesta k obrazku" width="100" height="50"/> Vkládání hyperlinků do SVG <a xlink:href="../referat.html"> <image xlink:href="dog.jpg" x="5" y="5" width="300" height="225"/> </a>

Základní objekty SVG <rect class="blu str" x="15" y="15" width="100" height="50" rx="12" ry="18“ /> <line style="stroke-width:2" x1="15" y1="240" x2="30" y2="200" /> <polyline points="160,200 180,230 200,210 234,220" stroke="red"/> <path d="M150,280 l19,10 -22,33 40,3 c12,43 44,-83 83,20" />

Text v SVG • text se zobrazuje elementem <text> • nedovoluje lámání řádek • element <tspan> ke změně stylů a posunů v rámci elementu <text>

Víceřádkové texty: <text x="140" y="73">more than one row: <tspan x="140" y="98">first row</tspan> <tspan x="140" y="123">second row</tspan> </text> Rotace a posun jednotlivých písmen: <text x="44" y="255" class="sser"> A <tspan dy="-9"> higher </tspan> <tspan rotate="10 35 50 65 80" dx="0 5 9 9 12"> Word! </tspan> </text> Vykreslení textu podle cesty: <path id="MyPath" d="M 330 75 s 50 -50 100 0 s 80 -50 110 0" style="stroke:blue;fill:none;stroke-width:10" /> <text class="sser blu" style="font-size:22"> <textPath xlink:href="#MyPath" startOffset="10%"> <tspan dy="-10">TextPath</tspan> </textPath> </text>

Vyplňování objektů <g style="stroke:black; stroke-width:5px; font-family:Verdana; font-size:100; font-weight:600;"> <text x="5" y="100" style="fill-opacity:1; fill:red"> A </text> <text x="50" y="100" style="fill-opacity:0.5; fill:blue"> P </text> <text x="95" y="100" style="stroke-opacity:0.3; fill:green"> G </text> </g>

Obrysy “stroke-linecap“: tvar zakončení cesty “stroke-linejoin“: tvar ostrých hran cesty

Transformace

Gradienty <defs> <linearGradient id="LinearGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6"/> </linearGradient> </defs> <rect fill="url(#LinearGradient)" stroke="black" stroke-width="5" x="0" y="0" width="400" height="200"/>

Animace Objekty animací: • animate: animace parametru • animateMotion: animace pohybu • animateColor: animace barvy • animateTransform: animace transformace Obecná animace parametru: <rect y="45" width="10" height="10" fill="green"> <animate attributeName="x" from="0" to="90" dur="10s" repeatCount="indefinite"/> </rect> Animace pohybu po cestě: <rect x="-5" y="-5" width="10" height="10" fill="blue"> <animateMotion path="M10 50 C10 0 90 0 90 50" dur="10s" rotate="auto" repeatCount="indefinite"/> </rect>

Události v SVG <circle cx="30" cy="30" r="20" fill="blue"> <set attributeName="fill" to="red" begin="click"/> <set attributeName="r" to="15" begin="mouseover"/> <set attributeName="r" to="20" begin="mouseout"/> <set attributeName="fill" to="blue" begin="mouseout"/> </circle>

Konec Máte nějaké dotazy??

SVG (Scalable Vector Graphic)