Un archivo SVG es una imagen vectorial que en su interior contiene código SVG. Un tipo de código muy similar a HTML o XML, orientado a formas vectoriales. Su elemento principal es la etiqueta <svg>.
Elemento SVG
La etiqueta <svg> es el elemento padre de cualquier imagen vectorial SVG que estemos creando, ya que todos los elementos deben estar en su interior. Es el equivalente a la etiqueta <html> respecto al lenguaje HTML.
En algunos casos, es posible que tengamos algunas etiquetas declaradas antes de <svg>, pero sería solo en casos muy especiales como el de <?xml>, una etiqueta para declarar la versión y codificación del archivo XML ya que, al fin y al cabo, tanto un documento HTML como un documento SVG son tipos derivados de un fichero .xml:
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M0,0 V50 L50,0 Z" fill="indigo" />
</svg>
Sin embargo, esa línea no es obligatoria, y generalmente, un archivo .svg no necesita declararla. Caso contrario es el del elemento <svg> que si es necesario para nuestro documento, como vemos en el ejemplo anterior. Este elemento permite declarar ciertos detalles principales de nuestro gráfico .svg.
Veamos cuales son sus atributos más importantes:
| Atributo | Descripción |
|---|---|
xmlns | Significa XML Namespace. Indica la URL con la versión específica de SVG que se va a usar. |
width | Indica el tamaño de ancho en |
height | Indica el tamaño de alto en |
viewBox | La región visible de la imagen vectorial SVG. La sintaxis es |
Namespace (atributo xmlns)
El atributo xmlns procede de xml namespace y permite indicar una URL donde se encuentra información sobre la especificación que se va a utilizar de SVG. Lo más habitual, suele ser indicar la URL http://www.w3.org/2000/svg:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M0,0 V50 L50,0 Z" fill="indigo" />
</svg>
No obstante, en algunos casos se puede omitir y depende del navegador o de la herramienta que lee el fichero .svg que lo lea correctamente o que de un error al no saber interpretarlo.
Crop (atributo viewBox)
El atributo viewBox se utiliza para determinar las dimensiones del lienzo de la imagen SVG. Observa el ejemplo anterior, donde he añadido el atributo style para darle estilos CSS de color de fondo al elemento <svg> y determinar visualmente cuál es el espacio que está ocupando por defecto:
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ccc">
<path d="M0,0 V50 L50,0 Z" fill="indigo" />
</svg>
Esto también se puede hacer de la forma tradicional, aplicando CSS a través del elemento <style> al documento SVG en este caso. Si lo comprobamos, el elemento tiene por defecto unas dimensiones de 300x150 píxels. Sin embargo, podemos cambiar estas dimensiones predefinidas, simplemente dándole un tamaño a través de las propiedades width y height en el elemento <svg> de la imagen:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
svg {
background: #aaa;
width: 500px;
}
path {
fill: #002;
}
</style>
<path d="M0,0 V50 L50,0 Z" fill="indigo" />
</svg>
Observa que el tamaño de ancho ha cambiado de 300 a 500, sin embargo, la ilustración de su interior sigue manteniendo la misma proporción. Cambiamos el tamaño del lienzo, pero no la ilustración interna.
Veamos ahora los siguientes cambios sobre la imagen, donde aplicaremos un width y height sobre el elemento <svg> principal, y luego un viewBox para definir el tamaño del lienzo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 75">
<style>
svg {
background: #aaa;
width: 300px;
height: 150px;
}
path {
fill: indigo;
}
</style>
<path d="M0,0 V50 L50,0 Z" />
</svg>
Ten en cuenta que le hemos asignado un tamaño de 300x150 (su tamaño inicial) a través de las propiedades width y height, y luego, al margen, hemos aplicado los valores 0 0 150 75 (la mitad) al viewBox. Con esto, hemos reducido las proporciones indicadas del lienzo, y por lo tanto, la ilustración interna aparece más grande, como si tuviera aplicado un zoom.
Dimensiones (width / height)
Aunque no lo hayamos hecho en los ejemplos anteriores, los atributos width y height que usamos en el CSS, podemos establecerlos como atributos de la etiqueta <svg>, aplicando y funcionando de la misma forma.
Ten en cuenta que mientras el atributo viewBox lo utilizamos para darle unas dimensiones de un lienzo, los atributos width y height nos permiten ampliar o reducir este lienzo sin cambiar sus proporciones.
Otros atributos
Veamos algunos de los otros atributos que suelen usarse para casos particulares, aunque no suelen ser los prioritarios a la hora de crear el dibujo SVG.
| Atributo | Descripción |
|---|---|
preserveAspectRatio | Indica como debe mostrarse la proporción de aspecto de la imagen. |
x | La posición en el eje X del gráfico vectorial SVG. No suele tener efecto en la mayoría de los casos. |
y | La posición en el eje Y del gráfico vectorial SVG. No suele tener efecto en la mayoría de los casos. |
El atributo preserveAspectRatio
El atributo preserveAspectRatio es un atributo de SVG que se puede indicar para determinar como se mantendrá la proporción de aspecto de un lienzo de SVG con un viewBox definido. Para utilizar este atributo, hay que indicar un valor para el tipo de alineación y, de forma opcional, un segundo parámetro que determina el tipo de recorte:
| Formato | Descripción |
|---|---|
preserveAspectRatio: align-type [meet | slice] | Establece como se mantendrá el ratio de aspecto. |
Así pues, para el valor de tipo de alineación habría que escoger un valor siguiendo este patrón: x___Y___. Ahora, para cada "hueco", habría que escoger una de los siguientes valores: Min, Mid o Max. De esta forma, xMinYMax alinea al mínimo el eje X y al máximo el eje Y, y xMidYMin alinea a la mitad el eje X y al mínimo el eje Y. En el caso de no querer forzar a realizar ningun escalado, utilizaríamos none, el valor por defecto.
Luego, el segundo parámetro opcional, sería uno de los siguientes (de no usarlo, se utilizará el valor por defecto: meet):
| Valor | Descripción |
|---|---|
| meet | El viewBox es completamente visible dentro del viewport. Se escala hasta hacerlo más grande. |
slice | El viewport es completamente cubierto por el viewBox. Se escala hasta hacerlo más pequeño. |
