{%hackmd anYwyN--TziyASUWcqP-Gw %}
# Tvořím web A–Z 2: lekce 07
<span>5. 5. 2021 | 18:00 - 20:00 | Praha</span>
Lekce 07 - SVG Animace
Jan Čuma
---
# Co je to SVG?
- <code>SVG</code> => Scalable Vector Graphics
- nezobrazuje obrazová data pomocí pixelů ale grafických objektů (body, přímky, křivky, mnohoúhelníky, ...)
- používá XML - značkovací jazyk podobný HTML
---
# Výhody SVG?
- nezávislost na rozlišení
- dá se snadno spravovat
- dá se dynamicky upravovat a animovat pomocí CSS nebo JS
- menší datový objem než bitmapa
- možnost vkládat SVG přímo do HTML
- může obsahovat odkazy nebo reagovat na události (hover, apod.)
- v případě vložení SVG kódu přími do HTML, obrázek se nestahuje ze serveru
# Nevýhody
- SVG nedokáže zobrazit tolik detailů jako rastrový obrázek
- "délka" kódu rozsáhlých grafik
---
# Použití SVG - img tag
```htmlmixed=
<body>
<img src="obrazek.svg" alt="obrazek" />
</body>
```
# Použití SVG - background-image
```htmlmixed=
<style>
.box-with-image {
background-image: url('obrazek.svg');
}
</style>
<div class="box-with-image"></div>
```
---
# Problém img a background-image
- nelze kontrolovat jednolivé části obrázku
- nelze animovat jednolivé části obrázku
- nelze stylovat jednolivé části obrázku
---
# Základní tvary
## Čtverec
```htmlembedded=
<svg width="500" height="500">
<rect x="50" y="50" width="100" height="100" rx="20" ry="20" />
</svg>
```
- každý SVG obrázek je definován uvnitř <code>SVG</code> elementu. Můžeme ho přirovnat k plátnu.
- atributy <code>width</code> a <code>height</code> našeho <code>SVG</code> elementu definují šiřku a výšku SVG obrázku (plátna).
- <code>x</code> atribut definuje pozici na x-ové ose
- <code>y</code> atribut definuje pozici na y-ové ose
- pozice je vždy relativní vůči <code>SVG</code> elementu
- atributy <code>rx</code> a <code>ry</code> zaoblí rohy
---
## Kruh
```htmlembedded=
<svg width="500" height="500">
<rect x="50" y="50" width="100" height="100" />
</svg>
```
- <code>cx</code> a <code>cy</code> atributy definují pozici středu kruhu
- <code>r</code> atribut definuje poloměr
---
## Elipsa
```htmlembedded=
<svg width="500" height="500">
<ellipse cx="300" cy="300" rx="80" ry="50" />
</svg>
```
- <code>cx</code> a <code>cy</code> atributy definují pozici středu elipsy
- <code>rx</code> atribut definuje horizntální poloměr
---
## Mnohoúhelník
```htmlembedded=
<svg width="500" height="500">
<polygon points="100,450 200,450 150,500" />
</svg>
```
- <code>points</code> atribut definuje souřadnice jednotlivých vrcholů na x-ové a y-ové ose
---
## Přímka
```htmlembedded=
<svg width="500" height="500">
<line x1="0" y1="0" x2="500" y2="500" stroke="blue" stroke-width="10" />
</svg>
```
- <code>x1</code> atribut definuje začátek přímky na x-ové ose
- <code>y1</code> atribut definuje začátek přímky na y-ové ose
- <code>x2</code> atribut definuje konec přímky na x-ové ose
- <code>y2</code> atribut definuje konec přímky na y-ové ose
- <code>stroke</code> atribut definuje barvu tahu
- <code>stroke-width</code> atribut definuje šířku tahu
---
## Multi-přímka
```htmlembedded=
<svg width="500" height="500">
<polyline points="0,0 50,100 100,250 300,200 400,150 500, 500" stroke="black" fill="none" />
</svg>
```
- <code>points</code> atribut definuje souřadnice jednotlivých bodů na x-ové a y-ové ose
---
## Křivka
```htmlembedded=
<svg width="500" height="500">
<path d="M 0 0 C 400 500, 100 500, 500 0" stroke="black" fill="transparent" stroke-width="5" />
</svg>
```
- nejkomplexnější element. Lepší je vytvářet ho přímo v SVG editoru
---
# Stylování SVG pomocí atributů
- pro stylování můžeme požít následující atributy:
- <code>stroke</code> : barva tahu
- <code>stroke-width</code> : šířka tahu
- <code>fill</code> : barva výplně
- <code>opacity</code> : průhlednost
- <code>fill-opacity</code> : průhlednost výpně
- <code>stroke-opacity</code> : průhlednost tahu
---
# SVG viewBox
- <code>viewBox</code> atribut definuje pozici a rozměry prostoru SVG elementu
```htmlembedded=
<svg width="500" height="500" viewBox="0 0 500
500">
<rect x="0" y="0" width="500" height="500" fill="#8F0771" />
</svg>
```
- 1. a 2. hodnota definuje počátek (posun) souřadnicového systému
- 3. a 4. hodnota definují rozměry (přiblížení/oddálení) zobrazení
---
# Vlastnosti tahu (stroke) 1/2
```htmlembedded=
<line stroke-linecap="round" x1="100" y1="100" x2="300" y2="300" stroke="black" stroke-width="10" />
<line stroke-linecap="square" x1="100" y1="100" x2="300" y2="300" stroke="black" stroke-width="10" />
<!-- butt - zakončení nepřesáhne délku tahu -->
<line stroke-linecap="butt" x1="100" y1="100" x2="300" y2="300" stroke="black" stroke-width="10" />
```
- <code>stroke</code> : barva tahu
- <code>stroke-width</code> : šířka tahu
- <code>stroke-linecap</code> : definuje tvar zakončení křivek/přímek
---
# Vlastnosti tahu (stroke) 2/2
```htmlembedded=
<!-- délka úseku a mezery 20px -->
<line stroke-dasharray="20" x1="100" y1="100" x2="300" y2="300" stroke="black" stroke-width="5" />
<!-- délka úseku 20px a mezery 5px -->
<line stroke-dasharray="20, 5" x1="100" y1="100" x2="300" y2="300" stroke="black" stroke-width="5" />
```
- <code>stroke-dasharray</code> : definuje délky úseků jednotlivých tahů a mezer mezi nimi
```htmlembedded=
<!-- začátky jednotlivých úseků jsou posunuty o 20px-->
<line stroke-dashoffset="-20" stroke-dasharray="15" x1="100" y1="100" x2="300" y2="300" stroke="black" stroke-width="5" />
```
- <code>stroke-dashoffset</code> : definuje posunutí (offset) počátku vykreslování jednotlivých úseků
---
# CSS Transforms 1/3
```css=
transform: translateX(2em);
transform: translateY(3in);
transform: translate(100px, 200px);
transform: translateZ(0px);
transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(10deg);
```
---
# CSS Transforms 2/3
```css=
transform: scaleX(2);
transform: scaleY(0.5);
transform: scale(2, 0.5);
transform: skewX(30deg);
transform: skewY(45deg);
transform: skew(30deg, 20deg);
transform-origin: bottom;
transform-origin: top left;
transform-origin: center right;
```
---
# CSS Transforms 3/3
```css=
body {
/* při použití rotateX nebo translateZ apod. */
perspective: 550px;
}
```
---
# CSS Transitions
```css=
transition-property: transform;
transition-duration: 1s;
transition-delay: .5s;
transition-timing-function: ease-in;
/* kombinace */
transition: transform 1s .5s ease-in;
```
---
# CSS Animations
```css=
animation-name: example;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode: none;
/* kombinace */
animation: example 2s 0s 1 normal linear none;
```
---
# CSS keyframes
```css=
@keyframes example {
from {
transform: translateX(0);
} to {
transform: translateX(100px);
}
}
```
```css=
@keyframes example {
0% {
transform: translateX(0);
} 50% {
transform: translateX(100px);
} 100% {
transform: translateY(100px);
}
}
```
---
# SVG text 1/2
```htmlembedded=
<text x="250" y="252" text-anchor="middle" alignment-baseline="middle">
Czechitas
</text>
```
- <code>text-anchor</code> : definuje pozici textu na ose x
---
# SVG text 2/2
- <code>alignment-baseline</code> : definuje pozici textu na ose y
---
# Animování křivky 1/2
```javascript=
const path = document.querySelector('#signature');
console.log(path.getTotalLength());
```
- zjištění délky křivky
---
# Animování křivky 2/2
```css=
#signature {
stroke-dasharray: 2635;
stroke-dashoffset: 2635;
animation: draw 3s forwards ease-in-out;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
```
- vlastnosti <code>stroke-dasharray</code> a <code>stroke-dashoffset</code> nastavíme na zjištěnou délku křivky
- vlastnost <code>stroke-dashoffset</code> animujeme na hodnotu 0
---
# Animování pomocí animate 1/2
```htmlmixed=
<svg ...>
<rect id="cool_shape" ... />
<animate xlink:href="#cool_shape" ... />
</svg>
```
---
# Animování pomocí animate 2/2
```htmlmixed=
<animate
xlink:href="#orange-circle" #reference na element
attributeName="x" #atribut, který ovlivňujeme
from="50" #začátek animace
to="450" #konec animace
dur="2s" #doba trvání
begin="click" #počátek rozběhnutí
values="50; 490; 350; 450" #průběžné hodnoty v čase
/>
```
```htmlmixed=
keyTimes="0; 0.5; 0.8; 1" #časy pro průběžné hodnoty
id="circ-anim" #id pro odkaz na animaci
/>
```
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
---
# Odkazy
1. https://www.figma.com
2. https://undraw.co/illustrations
3. https://cssauthor.com/amazing-svg-animation-tools-and-libraries
---
# Konec
<span>5. 5. 2021 | 18:00 - 20:00 | Praha</span>
Lekce 07 - svg - použití, styly, animace
Jan Čuma
{"metaMigratedAt":"2023-06-15T23:57:00.472Z","metaMigratedFrom":"YAML","title":"Lekce 07 | Tvořím web A–Z 2","breaks":false,"lang":"cs","slideOptions":"{\"transition\":\"none\",\"theme\":\"night\",\"margin\":0.05,\"minScale\":0.1,\"maxScale\":5,\"width\":2560,\"height\":1600}","contributors":"[{\"id\":\"0770b77c-5054-4cf7-a577-a646d73ab89a\",\"add\":4745,\"del\":4554}]"}