Resp.
2
Votos
1
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.
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 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.
Por tanto, no suelen existir editores específicos de SVG, ya que la creación de archivos en SVG suele ser más bien una de las utilidades de los editores 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. Se puede visitar el proyecto y acceder a un demo desde su página en GitHub: 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.
<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. 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.
<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>
Esto 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 cargas siguientes serán más rápidas.
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.
¿Quieres añadir algo sobre SVG?
Crea artículos, recursos o comparte información sobre SVG
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.
Preguntas y respuestas de SVG
Se han recibido 2 faqs en SVG
Resp.
2
Votos
1