SVGEmpezando con SVG


Observaciones

Gráficos vectoriales escalables (SVG) es un estándar W3C para dibujar imágenes vectoriales.

Aquí hay un simple archivo SVG independiente:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

SVG también se puede incrustar en HTML, en cuyo caso el atributo xmlns no es obligatorio.

Otros elementos gráficos son:

  • <line>
  • <ellipse>
  • <path>
  • <polygon> y <polyline>
  • <text> incluyendo elementos secundarios como <tspan> y <textPath>

CSS se usa para el estilo, aunque no todas las propiedades de CSS se aplican a SVG y SVG define algunas propiedades específicas, como el fill y el stroke que no se usan en otros lugares.

Las formas se pueden rellenar con degradados o patrones y se pueden lograr efectos de trama adicionales mediante el uso de filtros.

El recorte está disponible utilizando los elementos gráficos anteriores como rutas de recorte.

Respecto a las versiones del estándar W3C SVG:

Versiones

Versión Fecha de lanzamiento
1.0 2001-09-04
1.1 Primera edición 2003-01-14
1.2 Diminuto 2008-12-22
1.1 Segunda edición 2011-08-16

SVG en línea

Inline SVG permite el marcado SVG, escrito dentro de HTML, para generar gráficos en el navegador.

Cuando se usa SVG en línea, no se requiere estrictamente un DOCTYPE. En lugar de eso, solo será suficiente con <svg> abrir y cerrar etiquetas junto con los atributos viewBox o width y height:

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>
 

El fragmento <svg> anterior actúa como un contenedor y como un elemento estructural. Este fragmento establece su propio sistema de coordenadas.

A continuación se muestra un ejemplo de representación de un fragmento SVG con algo de contenido. Producirá un rectángulo con "¡Hola mundo!" texto dentro de ella

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
 

Resultado:

Ejemplo de salida SVG simple

SVG como imagen de fondo

Puede mostrar un archivo SVG dentro de un documento HTML, especificándolo como una imagen de fondo en CSS. Por ejemplo:

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}
 

Si las dimensiones especificadas en su archivo SVG son mayores que las dimensiones de su elemento HTML, puede ser conveniente especificar la propiedad de background-size para escalar el SVG para que se ajuste a su elemento.

Al igual que con el uso de SVG como <img> , vale la pena señalar algunas limitaciones con este enfoque:

  • La compatibilidad del navegador no incluye Internet Explorer 8 y versiones anteriores, ni Android 2.3 y versiones anteriores.
  • No puede aplicar estilo a los elementos individuales contenidos en el archivo SVG utilizando CSS, que es externo al archivo SVG. Todo el CSS debe estar dentro del propio archivo de imagen.

SVG como un

Puede representar el contenido de un archivo SVG como una imagen dentro de un documento HTML utilizando una etiqueta <img> . Por ejemplo:

<img src="my_svg_file.svg" alt="Image description">
 

Las dimensiones de la imagen, de manera predeterminada, se mostrarán de acuerdo con las propiedades de ancho y alto especificadas en el archivo SVG al que se hace referencia en el atributo src .

Vale la pena señalar varias limitaciones inherentes a este enfoque:

  • La compatibilidad del navegador, aunque es buena, no incluye Internet Explorer 8 y versiones anteriores, ni Android 2.3 y versiones anteriores.
  • No puede aplicar estilo a los elementos individuales contenidos en el archivo SVG utilizando CSS, que es externo al archivo SVG. Todo el CSS debe estar dentro del propio archivo de imagen.
  • JavaScript no se ejecutará.
  • La imagen debe estar completa en un solo archivo. Por ejemplo, si el archivo SVG contiene imágenes de trama, esas imágenes internas deben codificarse como URL de datos.