Ver el código de «SVG pasiño a pasiño»


[[File:SVG_logo.png|thumb|right| Logo SVG]]

[[File:Other_image_formats_vs_SVG.png|thumb|right| Comparación formatos de imaxe con SVG]]

[[File:Svg exemplo.png|thumb|right| Exemplo de SVG e resultado]]

= Gráficos SVG =
SVG (''Scalable Vector Graphics'') significa gráficos vectoriales escalables. E un estándar de web para descrición de gráficos bidimensionais. A etiqueta <<nowiki />svg> '''permítenos o uso de imaxes en formato SVG'''.

O formato dos ficheiros SVG está '''baseado en XML''' (''Extensible Markup Language''); foi publicado por primeira vez por un grupo de traballo do ''World Wide Web Consortium'' (W3C) no 2001. Pode ser usado para describir obxectos bidimensionáis (gráficos ou animmacións) e pode ser escalado sen perda de calidade. Nos inicios moitos navegadores tiñan problemas amosando contidos SVG pero na actualidade son soportados por todos os navegadores mayoritarios.

Algúns programas gráficos coma Adobe Illustrator (ou o seu equivalente software libre Inkscape Illustrator) permiten usar este formato, que fai relativamente sinxelo describir un vector gráfico ou animación e mostralo nun navegador. 

Os '''ficheiros SVG son defindos nunha estrutura de árbore composta por elementos individuais'''. De xeito similar os ficheiros CSS, os '''atributos están asignados a estes elementos'''. SVG está baseado na sintaxe of XML, así que '''cada ficheiro SVG comeza cun XML e a declaración Doctype'''. Lembra que XML e unha linguaxe de marcas declarativa usada prncipalmente para representar xerárquicamente datos estruturados nun formato de ficheiro de texto. A principal vantaxe dos ficheiros XML e que poden ser lidos por máquinas e tamén humáns.

Para crear imáxenes svg primeiro crearemos a etiqueta <<nowiki />svg> cos seus respectivos atributos coma ''width'' (ancho) e ''height'' (alto).

Creamos '''un lienzo''' coas súas dimensións e '''dentro crearemos os nosos gráficos''' vectoriais escalables.

<syntaxhighlight lang="html5">
<svg  width="240" height="250">...</svg>
</syntaxhighlight>

Se non se indica ''width'' e ''height'' o '''valor por defecto''' será do '''100%'''.

Svg posee un '''sistema de coordenadas''' onde o '''punto da orixen (0,0)''' será a '''esquina superior esquerda''', a '''coordenada x aumenta o seu valor hacia a dereita''' e a '''coordenada y aumenta o seu valor hacia abaixo'''.

Dentro de <<nowiki />svg> podemos crear desde simples lineas, figuras xeométricas coma círculos, cadrados, rectángulos, triángulos, polígonos, elipses e traxectorias ata complexas imágenes coma logos. 

Además podemos '''darlle estilo con css''' e '''funcionalidades con JavaScript'''.

Os gráficos resultantes son vectoriales polo que '''nunca perden a súa resolución ainda que os agrandemos'''.

== Vantaxes e diferenzas ==
=== PNG e JGP vs SVG ===
Cal é a diferenza entre SVG, PNG, and JPG? 
; SVG
: e un formato gráfico baseado en vectores que representa as imaxes como valores matemáticos
; JPG
: é u raster ou formato de imaxe bitmap 
; PNG
: usa código binario para comprimir os datos da imaxe

Os ficheiros SVG son os preferidos para deseño gráfico porque calquera pode facilmente ver as dimensións e valores de cada elemento da imaxe.

Outra vantaxe importante do formato SVG e a súa integración coas ''CSS Media Queries''. Os ''layouts'' desenvoltos como parte dun deseño responsivo adáptanse automáticamente o tamaño da pantalla (''viewport'') via ''CSS Media Queries''. Os gráficos SVG poden ser integrados nos elementos HTMLe controlados via ''media queries'' para que se poidan adaptar ó ancho da fiestra do navegaor.

=== SVG vs Canvas ===
HTML5 introducíu dous elementos gráficos: <canvas> e <svg>, que permiten crear gráficos para a web, pero que teñen diferenzas

A seguinte táboa resume algunhas diferencias básicas entre os dous elementos permitindo así usar cada un de xeito apropiado.ively and appropriately.

{| class="wikitable" style="margin:auto"
|+ SVG vs Canvas
|-
! SVG !! Canvas 
|-
| Vector based (composed of shapes) ||  Raster based (composed of pixel)
|-
| Multiple graphical elements, which become the part of the page's DOM tree || Single element similar to <img> in behavior. Canvas diagram can be saved to PNG or JPG format
|-
| Modified through script and CSS ||  Modified through script only
|-
| Good text rendering capabilities || Poor text rendering capabilities  
|-
| Give better performance with smaller number of objects or larger surface, or both ||  Give better performance with larger number of objects or smaller surface, or both
|-
| Better scalability. Can be printed with high quality at any resolution. Pixelation does not occur ||  Poor scalability. Not suitable for printing on higher resolution. Pixelation may occur
|}

= Bordes e recheos de gráficos dentro de SVG =
Todos os gráficos SVG poseún '''borde''' e '''recheo'''. A apariencia destes dous aspectos poden ser controlados mediante varias propiedades que evidentemente irán na etiqueta de apertura de cada gráfico.

Enfocaremos en coñecer as propiedades que nos permitan controlar o borde e fondo.

== Propiedades ''stroke'' SVG ==
As '''propiedades [https://www.w3schools.com/graphics/svg_stroking.asp ''stroke''] relacionadas ó borde''' son: 
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* stroke: permite definir a cor.
* stroke-width: ancho de borde.
* stroke-linecap: estilo de terminación de borde.
* stroke-dasharray: estilo de borde discontinua.
* stroke-opacity: opacidade de borde.
</div>

== Propiedade ''fill'' SVG ==
As '''propiedades relacionadas ó estilo de fondo''' de figuras SVG son:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* fill: cor de fondo.
* fill-opacity: opacidade de fondo.
* fill-rule: cor total ou parcial.
</div>

= Elementos predefinidos =
SVG ten algúns '''elementos de forma predefinidos''' que poden ser utilizados polos desarolladores:
<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
* Rectangle <<nowiki />rect>
* Circle <<nowiki />circle>
* Ellipse <<nowiki />ellipse>
* Line <<nowiki />line>
* Polyline <<nowiki />polyline>
* Polygon <<nowiki />polygon>
* Path <<nowiki />path>
</div>

Explicaremos a continuación cada unha deles.

== Liñas SVG ==
Crear liñas rectas é moi sinxelo. Hai que definir:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* o punto inicial 
* o punto final 
* as propiedades para determinar cor, ancho e outras
</div>

Para crear una línea recta dentro de SVG '''crearemos a etiqueta <<nowiki />rect/> dentro do elemento <<nowiki />svg>'''
<syntaxhighlight lang="html5">
<svg>
  <line/>
</svg>
</syntaxhighlight>

=== Posición do segmento de recta ===
Un segmento de recta dentro de SVG está limitado polo punto inicial e o seu punto final. No código expresarémolo coma propiedades de <line>:
<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
* x1: posición inicial no eixo X.
* y1: posición inicial no eixo Y.
* x2: posición final no eixo X.
* y2: posición fina no eixo Y.
</div>

Podemos determinar o punto inicial e final dunha liña en HTML:
<div style="column-count:2;-moz-column-count:2;-webkit-column-count:2">
* O punto inicial será as coordenadas SVG: (x1,y1)
* O final da liña SVG corresponde a: (x2,y2)
</div>

 '''Recordatorio.''' O punto de orixe de coordenadas (0,0) será a esquina superior esquerda do lienzo SVG.

=== Algunhas propiedades === 
Algunhas xa coñecidas e que poden ser empregadas:
* stroke: define a cor da liña.
* stroke-width: define o ancho da liña.
* stroke-linecap: estilo de terminación do borde

=== Exemplos ===
Podes executar este [https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_line código de exemplo]
<syntaxhighlight lang="html5">
 <svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg> 
</syntaxhighlight>

Tes máis exemplos de uso de liñas ([https://www.tutorialrepublic.com/codelab.php?topic=html5&file=create-a-line-with-svg 1] e [https://desarrolladoresweb.org/html5/lineas-svg-en-html5/ 2].

== Poliliñas SVG ==
A diferenza dunha liña, unha poliliña é unha cadea de liñas unidas que forman unha soa figura denominada poliliña. 

Para empezar a crear una poliliña simplemente colocamos a etiqueta <polyline/> dentro do elemento SVG:

<syntaxhighlight lang="html5">
<svg>
  <polyline/>
</svg>
</syntaxhighlight>

=== Puntos de inflexión ===
A forma máis simple dunha poliliña é unha figura que visualmente está formada por varios segmentos de liña unidos entre si para formar un único elemento. Para crear estes puntos de inflexión simplemente declaramos a propiedade points e no seu valor colocamos os pares ordeados X e Y separados por espacio e os pares ordenados serán separados por comas (,).

<syntaxhighlight lang="html5">
<svg>
  <polyline points="100 100, 150 150, 200 100"/>
</svg>
</syntaxhighlight>

 '''Ollo'''. Esto non dibuxará unha figura visible en el navegador! Precisamos establecer algunha propiedade que controle o aspecto da poliliña (cor, ancho, estilo...)

=== Propiedades para polyline ===

[[File:Poliliña_svg.png|thumb|right|Exemplo de poliliña]]

Entre as posibles propiedades que podemos empregar algunhas son:
* stroke: cor da liña
* stroke-width: ancho da liña.
* fill: cor de recheo (valor none para evitar cor de recheo)

=== Exemplos ===

'''Exemplo 1.''' Unha poliliña de cor vermella que parte desde o punto (50,50) e pasa polos puntos (150,1500), (80,200) e finaliza en (250,300) do espazo SVG.

<syntaxhighlight lang="html5">
<svg style="border: 1px solid black;" width="400px" height="300">
  <polyline fill="none" stroke="red" stroke-width="5" points="50 50, 150 150, 80 200, 250 300"/>
</svg>
</syntaxhighlight>

Tes máis [https://www.w3schools.com/graphics/svg_polyline.asp documentación] e exemplos de uso de poliliñas ([https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_polyline 1] e [https://desarrolladoresweb.org/html5/polilineas-en-html5/ 2]).

== Rectángulos SVG ==
Para crear un rectángulo en SVG creamos a etiqueta <<nowiki />rect/> dentro do elemento <<nowiki />svg> e o rectángulo se dibuxará dentro do espazo SVG.

<syntaxhighlight lang="html5">
<svg width="500" height="400" > 
  <rect/>
</svg> 
</syntaxhighlight>

=== Ancho e alto ===
Para determinar as dimensións de ancho e alto do rectángulo:
* width: ancho do rectángulo (en dirección do eixo X)
* height: altura do rectángulo (en dirección do eixo Y)

 Os valores para estas propiedades poden ser numéricos coa súa respectiva unidade de medida (px, em, %, ...)

=== Posición ===
Posicionar un rectángulo require establecer as coordenadas (X,Y) da esquina superior esquerda do rectángulo.

 '''Lembra'''. O punto de orixe (0,0) será a esquina superior esquerda do lienzo SVG

Propiedades para posicionar rectángulos:
* X: indica a distancia entre o borde esquerdo do lienzo SVG e o borde esquerdo do rectángulo.
* Y: indica a distancia entre o borde superior do lienzo SVG y el borde superior do rectángulo. 

=== Outras propiedades ===
Coma no resto de casos, entre outras stroke, stroke-width e fill.

Como propiedades máis particulares, podemos salientar que podemos crear un rectángulo con bordes redondeados coas seguintes propiedades dentro da etiqueta <<nowiki />rect/>
* rx: radio de borde X, define a distancia en X desde onde empeza a curvatura.
* ry: radio de borde Y, define a distancia en Y desde onde empeza a curvatura. 

Se so definimos un radio (sexa rx ou ry) tomarase en conta a mesma medida para a outra de tal xeito que o borde resultante será uniforme con radios de curvatura iguais.

Este sería un [https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_rect4 rectángulo vermello cos bordes redondeados]:

<syntaxhighlight lang="html5">
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5" />
</svg>
</syntaxhighlight>

=== Exemplos ===

[[File:Rectangulo_svg.png|thumb|right| Réctangulo posicionado sobre lienzo SVG]]

'''Exemplo 1.'''. Crea un rectángulo:
* Posicionado no punto (100,50)
* De ancho 200 e alto 100
* Nun lienzo SVG de ancho 500 e alto 400
* Configurando o lienzo para que sea distinguible cun borde solido de 1px e cor negra.

<syntaxhighlight lang="html5">
<svg style="border: 1px solid black;" width="500" height="400" > 
  <rect x="100" y="50" width="200" height="100" />
</svg>
</syntaxhighlight>

Tes máis [https://www.w3schools.com/graphics/svg_rect.asp documentación] e exemplos de uso de rectángulos ([https://www.tutorialrepublic.com/codelab.php?topic=html5&file=create-a-rectangle-with-svg 1] e [https://desarrolladoresweb.org/html5/rectangulos-en-svg-html5/ 2])

== Polígonos SVG ==
A etiqueta <<nowiki />polygon> de HTML5 nos permite crear unha figura pechada mediante varios lados e vértices. Creamos a etiqueta <<nowiki />polygon> dentro do elemento <<<nowiki />SVG> e engadimos as propiedades necesarias para formar a figura desexada.

<syntaxhighlight lang="html5">
<svg>
  <polygon/>
</svg>
</syntaxhighlight>

=== Vértices ===

[[File:Polygon_svg.png|frame|right| Pentágono con polygon en SVG]]

Os vértices visualmente preséntanse como puntos de inflexión e poderemos definir cada punto mediante un par ordenado (X,Y) (equivalente ás poliliñas co atributo points).

A propiedade points serve para establecer os puntos de inflexión ou vértices mediante pares ordenados separados por comas.

<syntaxhighlight lang="html5">
<svg width="400px" height="300">
  <polygon points="175 40, 270 108, 233 216, 117 216, 81 108" />
</svg> 
</syntaxhighlight>

No caso do polígono o punto inicial e final únense mediante unha liña para formar unha figura pechada; e a cor de recheno por defecto é a negra. 

=== Exemplos ===
'''Exemplo 1'''. Crea un triángulo con fondo laranxa e borde solido de 5px de cor negra.
<syntaxhighlight lang="html5">
<svg width="400px" height="300px">
  <polygon fill="orange" stroke="black" stroke-width="5px" points="80 230, 180 30, 280 230" />
</svg>
</syntaxhighlight>

Tes máis [https://www.w3schools.com/graphics/svg_polygon.asp documentación] e exemplos de uso de polígonos ([https://www.tutorialrepublic.com/codelab.php?topic=html5&file=create-a-rectangle-with-svg 1] e [https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_polygon4 2])

== Círculos SVG ==
Para dibuxar un circulo creamos a etiqueta <<nowiki /circle/> dentro da etiqueta SVG:

<syntaxhighlight lang="html5">
<svg>
  <circle/>
</svg>
</syntaxhighlight>

=== Posición do círculo ===
A ubicación do círculo dentro do lienzo SVG está definido pola posición do seu centro (cx,cy) e a dimensión de radio (r) que posúe.

Para establecer a posición do centro declaramos as propiedades cx y cy, de tal xeito que o par ordenado (cx,cy) é o punto onde se atopa o centro:
<div style="column-count:2;-moz-column-count:2;-webkit-column-count:2">
* cx: posición do centro no eixo X.
* cy: posición do centro no eixo Y.
</div>

 '''LEMBRA'''. O punto de orixe de coordenadas para SVG en HTML é a esquina superior esquerda do lienzo SVG.

Observa o gráfico representativo para entender mellor a posición dun circulo en SVG.

=== Radio do círculo ===
É a distancia do centro hacia calquera punto do círculo. Para definilo utilizaremos a propiedade r dentro da etiqueta <circle/>:
<syntaxhighlight lang="html5">
<svg width="400px" height="400px">
  <circle cx="200" cy="180" r="100"/>
</svg>
</syntaxhighlight>

Por defecto os círculos son recheados con cor negra.

=== Exemplos ===
'''Exemplo 1.''' Crea un círculo:
<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
* con centro na posición (120,150)
* cun radio de de 80px
* color de recheo verde
* borde azul con ancho de 5px
</div>

<syntaxhighlight lang="html5">
<svg width="400px" height="400px">
  <circle cx="120" cy="150" r="80" fill="green" stroke="blue" stroke-width="5px"/>
</svg>
</syntaxhighlight>

<gallery>
File: Circulos-exercicio1_svg.jpg | Exemplo 1 - Círculo con centro (120,150), radio 80ox, recheo verde e borde azul de 5px
File: Circulos-exercicio2_svg.jpg| Outro exemplo - Burato cilíndrico
File: Circulos-exercicio3_svg.jpg| Outro exemplo - Gusano con círculos e liñas
</gallery>

Tes máis [https://www.w3schools.com/graphics/svg_circle.asp documentación] e exemplos de uso de círculos ([https://www.tutorialrepublic.com/codelab.php?topic=html5&file=create-a-circle-with-svg 1],[https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle 2] e [https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle 3]).

== Elípses SVG ==

[[File:Elipse-svg-en-HTML5.jpg|thumb|right|Elipse]]

Unha elipse é unha figura xeométrica curva e pechada, con dous eixos perpendiculares. Posúe un centro e un eixo menor (ry) e eixo maior (rx) segundo sea o caso.

Para dibuxar unha elipse utilizamos a etiqueta <ellipse/> dentro do elemento SVG:
<syntaxhighlight lang="html5">
<svg>
  <ellipse/>
</svg>
</syntaxhighlight>

=== Posición ===

[[FIle:Elipse_svg.jpg|thumb|right|Elipse]]

A posición da elipse dentro de SVG é similar a do círculo: tamén esta definida pola posición do seu centro dada polo punto (cx,cy). Determínase mediante atributos:
* cx: distancia do centro ó borde dereito do lienzo SVG (posición no eixo X)
* cy: distancia do centro ó borde superior do lienzo SVG (posición no eixo Y)

 '''LEMBRA'''. O punto (0,0) corresponde á esquina superior esquerda do lienzo SVG máis non da pantalla.

=== Dimensión de elipse ===
Sabemos que unha elipse posee un eixo maior e outro menor. Estableceremos as súas dimensións cos atributos rx e ry:
* rx: dimensión do eixo no eixo X.
* ry: dimensión do eixo no eixo Y.

Por defecto o resultado será unha elipse con recheo de cor negra.

<syntaxhighlight lang="html5">
<svg width="400px" height="300px">
  <ellipse cx="150" cy="120" rx="140" ry="80"/>
</svg>
</syntaxhighlight>

=== Exemplos ===
'''Exemplo 1.'''. Crear unha elipse:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* color de recheo laranxa
* sen borde
* dimensión do eixo maior en X de 150px
* dimensión de eixo menor en Y de 40px
* posicion do centro no punto (200,120)
</div>

<syntaxhighlight lang="html5">
<svg width="400px" height="300px">
  <ellipse cx="200" cy="120" rx="150" ry="40" fill="orange" stroke="none"/>
</svg>
</syntaxhighlight>

Tes máis [https://www.w3schools.com/graphics/svg_ellipse.asp documentación] e exemplos de uso de elípsess ([https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_ellipse2 1] e [https://www.w3schools.com/graphics/svg_ellipse.asp 2]).

== Texto SVG ==
Para crear texto en formato SVG agregamos a etiqueta <text> dentro do elemento <svg>; neste caso precisaremos a etiqueta de peche <text/>.

<syntaxhighlight lang="html5">
<svg>
  <text>Este é un texto SVG</text>
</svg>
</syntaxhighlight>

=== Posición do texto ===

[[File:Posicion-de-texto-SVG.jpg|thumb]]

Igual que coas figuras geométricas:
* x: distancia hacia o texto no eixo X.
* y: distancia hacia o texto no eixo Y. 

O punto (X,Y) é onde se inicia o texto:

<syntaxhighlight lang="html5">
<svg>
    <text x="80" y="130">Este es un texto SVG</text>
</svg>
</syntaxhighlight>

=== Algunhas propiedades ===
Habituales de SCG:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* fill: cor de recheo de texto.
* stroke: cor de borde de texto.
* stroke-width.- ancho de borde do texto.
</div>

Propias do texto:
<div style="column-count:2;-moz-column-count:2;-webkit-column-count:2">
* font-family: indica o tipo de familia tipográfica ou tipo de letra.
* font-size: para establecer tamaño de letra.
* font- weight: para establecer grosor de letra. 
</div>

Para agregar estas propiedades empregaremos o atributo style dentro da etiqueta <text>. style contene instruccións para controlar a apariencia do texto: estas instruccións están formadas por propiedades CSS e pódense estudar na páxina adicada a CSS.

O código a continuación indica:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* que o tipo de letra debe ser impact
* tamaño de letra 40px
* ancho de letra de 800
</div>

<syntaxhighlight lang="html5">
<svg width="400" height="300">
  <text x="50" y="130" fill="yellow" stroke="blue" stroke-width="2px" style="font-family:impact; font-size:40px; font-weight: 800;">Texto SVG!</text>
</svg>
</syntaxhighlight>

=== Exemplos ===
Tes máis [https://www.w3schools.com/graphics/svg_text.asp documentación] e exemplos de uso de texto ([https://www.tutorialrepublic.com/codelab.php?topic=html5&file=rotate-and-render-text-with-svg 1],[https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle 2] e [https://desarrolladoresweb.org/html5/texto-svg-en-html5/ 3]).

== Path (trazos) SVG ==
A etiqueta <<nowiki />path> permítenos crear un trazo na pantalla dentro dun lienzo SVG; danos libertade para crear calquier forma xeométrica facendo uso de puntos unidos por liñas e curvas controladas. 

=== Atributos para <<nowiki />path> ===
Os atributos para <<nowiki />path> son os mismos que para a mayoría de gráficos SVG, máis outro: “d”, onde se define a ruta que seguirá o trazo mediante puntos e comandos. A grandes rasgos, recordamos os atributos para grafitos SVG:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* stroke: cor do borde.
* fill: para cor do recheo.
* d: para definir a ruta do trazo.
</div>

=== Comandos para definir a ruta do trazo ===
Para indicar a forma que definirá a ruta do trazo faremos uso de varios comandos, de tal xeito que cos valores que lles asignemos podamos controlar a forma e posición do gráfico resultante.
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* M: Ubica a orixe do trazo.
* L: liña hacia o punto do seu valor.
* H: liña horizontal.
* V: liña vertical.
* C: curva.
* S: curva suave.
* Q: curva Bézier cuadrática.
* T: curva Bézier cuadrática lixeira.
* A: dibuxa un arco elíptico.
* Z: atributo final para pechar o dibuxo total.
</div>

Os valores que tomen estos comandos serán puntos do plano, pares (X,Y) hacia onde se dibuxe o trazo. Por outra banda, poden poñerse en maiúsculas para que o dibuxo esté en posición absoluta e con minúsculas para que a posición sexa relativa. 

=== Exemplos ===

[[File:Trazos_path_html5.jpg | frame | right |Triángulo mediante uso de path]]

'''Exemplo 1.''' Crea unha figura moi simple: un triangulo, empregando a etiqueta <path> que cumpra os seguintes requisitos:
* partiremos no punto (80,50)
* logo crearemos unha liña ao punto (80,200)
* seguiremos con outra liña ó punto (300,200)
* finalmente pechamos co comando Z.

<syntaxhighlight lang="html5">
<svg width="400" height="300">
  <path d="M 80 50 L80 200 L300 200 Z" style="stroke:#000; fill:orange;" />
</svg>
</syntaxhighlight>

Resultado: un triangulo con recheo color laranxa e borde negro. A ruta es básicamente forma un triangulo. 

'''Exemplos avanzados.'''

Podes atopar exemplos máis avanzados [https://desarrolladoresweb.org/html5/animaciones-trazos-y-canvas-en-html5/ neste titorial] ou no [https://www.w3schools.com/graphics/svg_path.asp titorial de w3schools]

= Filtros =
Os filtros SVG son usados para engadir efectos especiáis os gráficos SVG.

Os elementos filtro (chamados primitivas) dispoñibles en SVG son:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* <<nowiki />feBlend> - filtro para combinar imaxes
* <<nowiki />feColorMatrix> - filtro para transformación das cores
* <<nowiki />feComponentTransfer>
* <<nowiki />feComposite>
* <<nowiki />feConvolveMatrix>
* <<nowiki />feDiffuseLighting>
* <<nowiki />feDisplacementMap>
* <<nowiki />feFlood>
* <<nowiki />feGaussianBlur>
* <<nowiki />feImage>
* <<nowiki />feMerge>
* <<nowiki />feMorphology>
* <<nowiki />feOffset> - filtro para ''drop shadows''
* <<nowiki />feSpecularLighting>
* <<nowiki />feTile>
* <<nowiki />feTurbulence>
* <<nowiki />feDistantLight> - filtro para ''lighting''
* <<nowiki />fePointLight> - filtro para ''lighting''
* <<nowiki />feSpotLight> - filtro para ''lighting''
</div>

 '''Curiosidade'''. Observa o prefijo fe en todos. Significa efecto de filtro, das siglas ''filter effect''.

 '''Consello'''. Podes usar múltiples filtros en cada elemento SVG!

 '''Para saber máis'''. Tes na [https://www.w3.org/TR/filter-effects-1/#FilterPrimitivesOverview definición do estándar] todos detallados e con algúns exemplos. 

Veremos algún deles a continuación para exemplificar as súas posibilidades. Pero antes temos que coñecer que son os elemntos defs e filter

== <<nowiki />defs> e <<nowiki />filter> ==
Todos os filtros SVG filters están definidos cun elemento <<nowiki />defs> element. The <<nowiki />defs> element é a abreviatura de definicións e contén a definicón de elementos espciais coma os filtros.

O elemento <<nowiki />filter> é usado para definir un filtro SVG filter. Pricisa un atributo id que identifica o filtro; o gráfico entón sinala ó filtro a usar.

== Efectos ''blur'' (de difuminación) ==
* [https://www.w3schools.com/graphics/svg_fegaussianblur.asp blur]

== Efectos ''drop shadows'' ==
* [https://www.w3schools.com/graphics/svg_feoffset.asp drop shadow]

== Gradientes==
* [https://www.w3schools.com/graphics/svg_grad_linear.asp Gradiente linear]
* [https://www.w3schools.com/graphics/svg_grad_radial.asp Gradiente radial]

= Animacións SVG - <<nowiki />animate> =
Podemos crear animaciones de elementos SVG en HTML5, las animaciones se ejecutan en un tiempo y pueden cambiar alguna propiedad del elemento en cuestión.
Etiqueta <<nowiki />animate> HTML5

A etiqueta <<nowiki />animate> contiene la animación propiamente dicha, mediante atributos podemos establecer las características de la animación. Por otro lado la etiqueta <animate> irá dentro del elemento SVG que deseamos animar.

Por exemplo se desexamos poñer animación a un elemento SVG de rectángulo, entonces a etiqueta <<nowiki />animate> irá do seguinte xeito:

<syntaxhighlight lang="html5">
<svg>
  <rect>
    <animate /> 
  </rect>
</svg>
</syntaxhighlight>

== Atributos para <<nowiki />animate> ==
* atributeName: serve para establecer o atributo ou característica do elemento que queremos animar. Pode ser a posición en X ou Y, a cor, etc.
* from: permítenos indicar o punto, estado ou valor inicial da animación.
* to: permíte indicar o valor ou estado final da animación.
* fill: permítenos establecer o que acontece despois de terminar a animación; o valor ''remove'' elimina a animación e ''freeze'' mantén o estado final.
* repeatCount: para indicar a cantidade de veces que se repite a animación; o valor pode ser un nímero enteiro ou ''undefined'' para que sexa indefinido. 

== Exemplos ==
'''Exemplo 1.'''  Un circulo SVG cambia de posición en dirección Horizontal (X) desde o extremo 0 ata 400px en sentido horizontal.
<syntaxhighlight lang="html5">
<svg width="1000" height="250">
  <circle cx="120" cy="150" r="80" fill="red">
   <animate attributeName="cx" from="0" to="300" dur="4s" fill="freeze" repeatCount="3"/> 
  </circle>
</svg>
</syntaxhighlight>

A nosa animación indica de que o atributo a animar ou modificar:
* é o cx o el centro en X
* desde a posición 0 ata a posición 300 en X
* a duración é de 4 segundos
* debe repetirse 3 veces
* ó final de todo queda en posición final da animación (mediante a propiedad fill co valor "freeze")

'''Exemplo 2.''' A cor de recheo dun rectángulo cambia desde un vermello (from="red") a un azul, nun tempo de 5 segundos (dur="5s") e que se repita catro veces (repeatCount="4"). 

<syntaxhighlight lang="html5">
<svg width="400" height="250">
 <rect width="150" height="150" fill="green">
   <animate attributeName="fill" from="red" to="blue" dur="5s" fill="remove" repeatCount="4"/> 
 </rect>
</svg>
</syntaxhighlight>

Neste caso eliminaremos a animación (fill="remove") cando remate de tal xeito que ó final o noso rectángulo queda coa súa cor orixinal (verde)

Podes [https://desarrolladoresweb.org/html5/animaciones-trazos-y-canvas-en-html5/ ver e executar estes exemplos de animación].

= Canvas =
* [https://desarrolladoresweb.org/html5/animaciones-trazos-y-canvas-en-html5/ Animacións, trazos e canvas]

= Referencias =
<div style="column-count:2;-moz-column-count:2;-webkit-column-count:2">
* [https://www.tutorialrepublic.com/html-tutorial/html5-svg.php HTML5 SVG on tutorialrepublic]
* [https://www.w3schools.com/graphics/svg_intro.asp SVG on w3schools]
* [https://www.w3schools.com/graphics/svg_examples.asp SVG exemplos en w3schools]
* [https://desarrolladoresweb.org/html5/svg-en-html5/ SVG en HTML5]
* [https://www.tutorialspoint.com/svg/ SVG on tutorialspoint]
* [https://www.seobility.net/en/wiki/SVG_%28Scalable_Vector_Graphics%29 Introduction]
* [https://www.w3.org/TR/filter-effects-1/ Estandar de efectos de filtros]
* [https://webdesign.tutsplus.com/es/tutorials/introduction-to-svg-filters--cms-33546 Introducción a filtros]
* [https://www.lifewire.com/svg-file-4120603 Introdución - lifewire]
* [https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial SVG Tutorial - MDN]
</div>