Diferencia entre revisiones de «SVG pasiño a pasiño»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 76: Línea 76:
 
* https://www.w3schools.com/graphics/svg_text.asp
 
* https://www.w3schools.com/graphics/svg_text.asp
  
 +
== Trazos - <<nowiki />path> ==
 +
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.
  
−
== Trazos - <path> ==
+
=== Atributos para <<nowiki />path> ===
−
La etiqueta <path> nos permite crear un trazo en la pantalla dentro de un lienzo SVG, nos da libertad para crear cualquier forma geométrica haciendo uso de puntos unidos por lineas y curvas controladas.  
+
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:
 +
* stroke: color de borde.
 +
* fill: para color de relleno.
 +
* d: para definir la ruta del trazo.
  
−
Atributos para <path>
+
=== 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.
 +
* 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.
  
−
Los atributos para <path> son los mismos que para la mayoría de gráficos SVG, pero ahora hay una en especial y se trata del atributo: “d”, pues dentro de ella se define la ruta que seguirá el trazo mediante puntos y comando. A grandes rasgos, recordemos los atributos para grafitos SVG.
+
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.  
  
−
    stroke.- color de borde.
+
'''Exemplo 1.''' Crea unha figura moi simple: un triangulo, empregando a etiqueta <path> que cumpra os seguintes requisitos
−
    fill.- para color de relleno.
+
* partiremos no punto (80,50)
−
    d.- para definir la ruta del trazo.
+
* logo crearemos unha liña ao punto (80,200)
−
 
+
* seguiremos con outra liña ó punto (300,200)
−
Comandos para definir la ruta del trazo
+
* finalmente pechamos co comando Z.
−
 
 
−
Para indicar la forma que definirá la ruta del trazo haremos uso de varios comandos, de tal manera que con los valores que les asignemos, podamos controlar la forma y posición de gráfico resultante.
 
−
 
 
−
    M.- Ubica el origen del trazo.
 
−
    L.- crea una linea hacia el punto de su valor.
 
−
    H.- dibuja una linea horizontal.
 
−
    V.- dibuja una linea vertical.
 
−
    C.- para crear una curva.
 
−
    S.- curva suave.
 
−
    Q.- para dibujar una curva Bézier cuadrática.
 
−
    T.- para dibujar una curva Bézier cuadrática ligera.
 
−
    A.- dibuja un arco eliptico.
 
−
    Z.- basta con poner este atributo al final para cerrar el dibujo total.
 
−
 
 
−
Los valores que tomen estos comandos serán puntos del plano, pares (X,Y) hacia donde se dibuje el trazo. Por otro lado, pueden ponerse en mayúsculas para que el dibujo este en posición absoluta y con minúsculas para que la posición sea relativa. A continuación veamos algunos ejemplos prácticos.
 
−
Ejemplo de path
 
−
 
 
−
Exemplo 1: este ejemplo se trata de crear una figura muy simple: un triangulo, empleando la etiqueta <path> partiremos en el punto (80,50), luego crearemos una linea al punto (80,200), seguiremos con otra linea al punto (300,200) y finalmente cerramos con el comando Z.
 
  
 
<svg width="400" height="300">
 
<svg width="400" height="300">
Línea 112: Línea 110:
 
</svg>
 
</svg>
  
−
Resultado: el resultado es un triangulo con relleno color naranja y borde negro. La ruta es básicamente forma un triangulo. Para comprender mejor el recorrido puedes ver la imagen
+
Resultado: un triangulo con rechen color laranxa e borde negro. A ruta es básicamente forma un triangulo.  
 +
 
 +
[[File: triangulo_con_path_svg.PNG | Triángulo mediante uso de path]]
 +
 
 +
'''Exemplos avanzados.'''
  
−
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 =
 
= Filtros =
Línea 121: Línea 123:
 
Os elementos filtro (chamados primitivas) dispoñibles en SVG son:
 
Os elementos filtro (chamados primitivas) dispoñibles en SVG son:
 
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
 
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
−
* <feBlend> - filtro para combinar imaxes
+
* <<nowiki />feBlend> - filtro para combinar imaxes
−
* <feColorMatrix> - filtro para transformación das cores
+
* <<nowiki />feColorMatrix> - filtro para transformación das cores
−
* <feComponentTransfer>
+
* <<nowiki />feComponentTransfer>
−
* <feComposite>
+
* <<nowiki />feComposite>
−
* <feConvolveMatrix>
+
* <<nowiki />feConvolveMatrix>
−
* <feDiffuseLighting>
+
* <<nowiki />feDiffuseLighting>
−
* <feDisplacementMap>
+
* <<nowiki />feDisplacementMap>
−
* <feFlood>
+
* <<nowiki />feFlood>
−
* <feGaussianBlur>
+
* <<nowiki />feGaussianBlur>
−
* <feImage>
+
* <<nowiki />feImage>
−
* <feMerge>
+
* <<nowiki />feMerge>
−
* <feMorphology>
+
* <<nowiki />feMorphology>
−
* <feOffset> - filtro para ''drop shadows''
+
* <<nowiki />feOffset> - filtro para ''drop shadows''
−
* <feSpecularLighting>
+
* <<nowiki />feSpecularLighting>
−
* <feTile>
+
* <<nowiki />feTile>
−
* <feTurbulence>
+
* <<nowiki />feTurbulence>
−
* <feDistantLight> - filtro para ''lighting''
+
* <<nowiki />feDistantLight> - filtro para ''lighting''
−
* <fePointLight> - filtro para ''lighting''
+
* <<nowiki />fePointLight> - filtro para ''lighting''
−
* <feSpotLight> - filtro para ''lighting''
+
* <<nowiki />feSpotLight> - filtro para ''lighting''
 
</div>
 
</div>
  
Línea 165: Línea 167:
 
* [https://www.w3schools.com/graphics/svg_grad_radial.asp Gradiente radial]
 
* [https://www.w3schools.com/graphics/svg_grad_radial.asp Gradiente radial]
  
−
= Animacións SVG - <animate> =
+
= 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.
 
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 <animate> HTML5
+
Etiqueta <<nowiki />animate> HTML5
  
−
La etiqueta <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.
+
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 ejemplo, si deseamos poner animación a un elemento SVG de rectángulo, entonces la etiqueta <animate> irá de la siguiente manera:
+
Por exemplo, si deseamos poner animación a un elemento SVG de rectángulo, entonces la etiqueta <animate> irá de la siguiente manera:
  
 
<svg>
 
<svg>
Línea 179: Línea 181:
 
</svg>
 
</svg>
  
−
== Atributos para <animate> ==
+
== 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.
 
* 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.
 
* from: permítenos indicar o punto, estado ou valor inicial da animación.
Línea 195: Línea 197:
 
</svg>
 
</svg>
  
−
Nuestra animación indica de que el atributo a animar o modificar es el CX o el centro en X, desde la posición 0 hasta la posición 300 en X, la duración es de 4 segundos y debe repetirse 3 veces y mediante la propiedad fill dentro de <animate> estamos indicando que al final de todo, se quede en posición final de la animación.
+
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
 +
* o 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").  
 
'''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").  

Revisión del 23:17 20 ago 2022

Gráficos SVG

SVG (Scalable Vector Graphics) significa gráficos vectoriales escalables. A etiqueta <svg> permítenos crear imaxes bidimensionais en formato svg.

Para crear imáxenes svg primeiro crearemos a etiqueta <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. 

<svg  width="240" height="250">...</svg>

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. (0,0)

Dentro de <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.

Pola extensión que pode acadar esta sección para explicar cómo aprender a crear gráficos en SVG (comezando por simples liñas, rectángulos, círculos, polígonos, elipses e curvas ata figuras híbridas máis complexas), abarcaremos este tema nun artigo separado: SVG pasiño a pasiño

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 stroke relacionadas ó borde son:

  • 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.

Propiedade fill SVG

As propiedades relacionadas ó estilo de fondo de figuras SVG son:

  • fill: cor de fondo.
  • fill-opacity: opacidade de fondo.
  • fill-rule: cor total ou parcial.

Elementos predefinidos

SVG hten algunos elementos de forma predefinidos que poden ser utilizados polos desarolladores:

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

Explicaremos a continuación cada unha delas.

Liñas SVG

Poliliñas SVG

Rectángulos SVG

Polígonos SVG

Círculos SVG

Elípses SVG

Texto SVG

Trazos - <path>

A etiqueta <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 <path>

Os atributos para <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:

  • stroke: color de borde.
  • fill: para color de relleno.
  • d: para definir la ruta del trazo.

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.

  • 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.

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.

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.

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

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

Triángulo mediante uso de path

Exemplos avanzados.

Podes atopar exemplos máis avanzados neste titorial ou no 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:

  • <feBlend> - filtro para combinar imaxes
  • <feColorMatrix> - filtro para transformación das cores
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> - filtro para drop shadows
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> - filtro para lighting
  • <fePointLight> - filtro para lighting
  • <feSpotLight> - filtro para lighting
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 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

<defs> e <filter>

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

O elemento <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)

Efectos drop shadows

Gradientes

Animacións SVG - <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 <animate> HTML5

A etiqueta <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, si deseamos poner animación a un elemento SVG de rectángulo, entonces la etiqueta <animate> irá de la siguiente manera:

<svg> <rect> 

  <animate />

</rect> </svg>

Atributos para <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. <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>

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
  • o 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"). <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>

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)

Canvas

Referencias

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=SVG_pasiño_a_pasiño&oldid=18766»