SVG pasiño a pasiño
Sumario
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.
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.
