SVG pasiño a pasiño

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

• https://www.w3schools.com/graphics/svg_line.asp

Poliliñas SVG

• https://www.w3schools.com/graphics/svg_polyline.asp

Rectángulos SVG

• https://www.w3schools.com/graphics/svg_rect.asp

Polígonos SVG

• https://www.w3schools.com/graphics/svg_polygon.asp

Círculos SVG

• https://www.w3schools.com/graphics/svg_circle.asp

Elípses SVG

• https://www.w3schools.com/graphics/svg_ellipse.asp

Texto SVG

• https://www.w3schools.com/graphics/svg_text.asp

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)

• blur

Efectos drop shadows

• drop shadow

Gradientes

• Gradiente linear
• Gradiente radial

Animacións SVG, Trazos e Canvas

• Animacións, trazos e canvas

Referencias

• HTML5 SVG on tutorialrepublic
• SVG on w3schools
• SVG exemplos en w3schools
• SVG en HTML5