Esta categoria contiene diversos artículos relativos al Formato SVG y un manual de introducción al formato SVG muy útil.
SVG es un formato de archivo para la especificación de gráficos vectoriales por medio de texto plano. Se trata de un formato estándar, que es soportado por todos los navegadores y la mayoría de los programas de edición gráfica.
Los gráficos en formato SVG se pueden especificar en archivos con extensión. svg así como "en línea", embebidos en el propio código HTML.
Más información:
Artículos destacados de SVG:
Características de SVG
Un repaso a las características principales de SVG, para conocer más de cerca este formato de gráficos vectoriales.
Qué es SVG
Una completa introducción al SVG, en el que se estudia sus ventajas, casos de uso e incluso la sintaxis para la creación de formas vectoriales básicas.
Manuales
En este manual vamos a abordar el formato vectorial SVG, vamos a conocer algunas características de SVG y ver ejemplos, casos de uso y mucho más.
Editor de SVG
En general, cualquier programa que sirva como editor gráfico es susceptible de funcionar también con SVG, principalmente aquellos programas que trabajan con gráficos vectoriales, como podría ser Ilustrator Affinity Designer o Sketch. Todos estos programas tienen en realidad sus propios formatos gráficos propietarios. Cuando trabajamos normalmente guardaremos los proyectos en su propio formato, pero también contienen opciones para la exportación a SVG, lo que nos permitirá usar esos archivos directamente en páginas web.
Por tanto, no suelen existir editores específicos de SVG y en verdad tampoco es necesario, ya que la creación de archivos en SVG suele ser más bien una de las utilidades de los editores de gráficos vectoriales comunes.
Sin embargo, hay un proyecto en GitHub interesante de un editor SVG de código libre, creado enteramente en tecnologías web, en este caso en Javascript. Como es Javascript podríamos integrarlo en cualquier sitio web y como es open source es posible descargarlo y usarlo en cualquier proyecto. Puedes encontrar más información de este proyecto en la categoría de SVG-Edit.
Librería Javascript para SVG
SVG es un formato gráfico estándar capaz de ser modificado por medio de programación Javascript. Por tanto, desde Javascript es posible crear y manipular gráficos vectoriales, así como crear impactantes animaciones.
Una interesante alternativa como librería Javascript para trabajar con SVG es SVG.js
Otra clásica librería para la creación y manipulación de SVG desde Javascript es Snap.svg
Cómo añadir imágenes SVG en HTML
Existen diversas maneras de añadir imágenes SVG en archivos HTML, usando la etiqueta <img> pero también por medio de la inserción del código SVG "inline", es decir, en el propio código HTML.
Usar la etiqueta IMG
Podemos usar ficheros .svg en el src de las etiquetas <img>, igual que si fueran archivos de bitmap como un png clásico o jpg.
<img src="./academic-cap.svg" alt="Imagen formato SVG">
Este tipo de imágenes vectoriales se comportará como un elemento de bloque, ocupando todo el espacio disponible en la página. Lo bueno es que, al ser vectorial, no pierden calidad. No obstante, pueden aparecer enormes en la página, dependiendo de las dimensiones de la pantalla o la ventana del navegador, por lo que lo conveniente sería dimensionar las imágenes para que no se agranden demasiado.
<img src="./academic-cap.svg" alt="Imagen formato SVG" width="100">
Obviamente, también podremos dimensionar la imagen con CSS, lo que sería todavía más versátil y correcto desde el punto de vista de la separación del contenido y presentación. Sin embargo, puede ocurrir que, mientras se carga el CSS (que generalmente viene de un CSS externo) la imagen aparecerá enorme y solamente se redimensionará cuando el CSS haya sido procesado. Por ese motivo a veces conviene tener un poco de CSS inline en la cabecera (<head>) o inline en la propia imagen que evite ese efecto de umagen gigante que luego pasa a dimensionarse correctamente.
Usar SVG inline
Una segunda opción es usar SVG inline, que consiste en insertar el propio código SVG dentro del código HTML. Para ello no hay más que usar la etiqueta <svg> del propio código fuente de la imagen vectorial.
Este sería el código de un archivo SVG, que podemos colocar perfectamente en un documento HTML y será procesado mostrando la imagen que representa.
<div class="button">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
<span>cancel</span>
</div>
Dado que el SVG está basado en XML las imágenes expresadas mediante este formato se parecen mucho a código con etiquetas HTML comunes.
Trabajar con el SVG inline tiene sus ventajas e inconvenientes, ya que el código SVG engorda el código HTML, haciendo que pese más. Pero la principal desventaja es que, si queremos usar la misma imagen SVG repetidas veces, el código estaría pesando por cada una de las veces que aparece esa imagen en la página.
Por contra, si usamos el SVG como un archivo externo cargado en la imagen <img> simplemente se tendrá que descargar ese código una única vez, además, en siguientes visitas este archivo externo podrá estar cacheado por el navegador, por lo que las visitas siguientes o el acceso a las siguientes páginas dentro de una misma visita serán más rápidas, ya que no requerirá descargar de nuevo el archivo gráfico.
La ventaja de un SVG inline es que la imagen cargará más rápido, ya que vendrá junto con el código HTML y se renderizará a la vez que el resto del contenido de la página. Para una imagen principal del sitio web, que solamente va a aparecer una vez, puede ser una buena decisión colocarla inline.
Colocar SVG como un fondo CSS
No olvidemos que podemos usar también SVG cargando las imágenes desde CSS. Por ejemplo, podríamos colocar una imagen por medio de un fondo en cualquier elemento HTML que lo necesitásemos, aislando este criterio de estilo en el código CSS y que quede independiente del HTML, de manera que se puede reutilizar fácilmente por medio de la aplicación de una clase, por ejemplo.
En este caso el HTML podría quedar muy limplio, sin ninguna referencia al SVG que se va a usar para colocar la imagen vectorial. En el código siguiente tendríamos una lista, en la que usaremos un SVG como bullet, de manera que decore cada uno de sus elementos.
<ul class="svgbullet">
<li>Elemento</li>
<li>De una</li>
<li>Lista HTML</li>
</ul>
Luego, en el código CSS del proyecto colocaremos las reglas de estilo necesarias, cargando la imagen .svg con su URL.
.svgbullet {
padding: 0;
}
.svgbullet li {
list-style-type: none;
background-image: url(./bullet.svg);
background-repeat: no-repeat;
padding-left: 25px;
}
Como podemos ver, cada vez que queramos una lista decorada de esta manera, sería simplemente reutilizar la clase CSS generada. Por supuesto, el código de este SVG se cargará una única vez, aunque se use múltiples veces a lo largo del proyecto, y se podrá cachear.
Cargar un SVG mediante Javascript
En este artículo explicamos las distintas técnicas para poder crear imágenes svg vectoriales mediante Javascript.
Además de lo explicado en este artículo, existen otras formas más imaginativas de cargar SVG en una página web, por ejemplo mediante Javascript, ayudándonos también de tecnologías estándar como Web Components que nos permitirían usar SVG tan sencillo como si usásemos una etiqueta del HTML básica.
Por ejemplo, con este código HTML podríamos mostrar en una página web el icono de Twitter:
<dile-social-icon icon="twitter"></dile-social-icon>
Ese icono sería perfectamente personalizable en tamaño y color con CSS y por supuesto ese componente permite iconos de muchas otras redes como Facebook, Instagram, etc. Para que el navegador entienda esa etiqueta requiere de algunos pasos extra, pero que no son difíciles si el desarrollador está familiarizado con las herramientas habituales de desarrollo frontend. La guía para usarlo la podemos ver en la propia página de documentación del componente dile-social-icon:
https://dile-components.polydile.com/components/dile-social-icon/
Existen muchos web components que implementan librerías de iconos SVG que podemos usar directamente, beneficiándonos del trabajo de otros desarrolladores disponibilizado como software libre.
Cuándo usar SVG inline
Vamos a ver los motivos que te podrían llevar a escribir el SVG directamente en el código HTML de la página (SVG inline):
Simplicidad: El SVG inline es sin duda la manera más sencilla de integrar SVG en la página.
Interactividad y dinamismo: Dado que el SVG está dentro de la página somos capaces de manipularlo mediante JavaScript o CSS. Esto nos permite hacer cosas como cambiar colores o animar elementos en respuesta a interacciones del usuario, de una manera relativamente sencilla. Al estar inline, el SVG forma parte del DOM de la página.
SEO: Los motores de búsqueda pueden indexar el contenido SVG inline. Quizás no siempre sea relevante, pero el código SVG podría contener elementos textuales importantes para el SEO.
Cuando usar SVG con etiquetas img
Otro de los mecanismos habituales de uso de SVG es integrarlo con etiquetas <img>. Los casos en los que se recomienda usar SVGs como imágenes se pueden resumir en estos puntos:
- Simplicidad y limpieza: Es tan simple usar SVG como cualquier otro archivo gráfico y ofrece las ventajas conocidas de los gráficos vectoriales. Las imágenes son adecuadas cuando prefieres mantener tu HTML más limpio.
- Caché: Si necesitas que tu SVG se use varias veces, es adecuado usar imágenes, ya que los archivos se descargarán una sola vez y pueden cachear. Al cachearse por los navegadores los archivos SVG referenciados no se necesitarán transferir en las distintas páginas, lo que mejora la velocidad de carga para visitas repetidas.
- Separación de elementos: Ideal cuando deseas mantener el gráfico separado del código HTML, facilitando la gestión y actualización de los gráficos de manera separada del contenido.
¿Quieres añadir algo sobre SVG?
Crea artículos, recursos o comparte información sobre SVG
Temas relacionados
Preguntas y respuestas de SVG
Se han recibido 2 faqs en SVG
Resp.
2
Votos
1
Resp.
2
Votos
1