Cómo trabajar con el formato SVG: guía para desarrolladores web principiantes
Aprende cómo trabajar con archivos en formato SVG y para qué se pueden modificar a través de código.
Contamos cómo trabajar con archivos en formato SVG y para qué se pueden modificar a través de código.
Por qué usar SVG
Si necesita elementos de interfaz nítidos, adaptables o animados, iconos, logotipos, imágenes vectoriales, es mejor utilizar el formato SVG. A continuación, hablaremos sobre las principales ventajas del formato.
Escalado de imagen con calidad pixel perfect
Al utilizar el formato PNG o imágenes de mapa de bits, los desarrolladores están limitados por los píxeles. Escalar una imagen reduce su calidad. Por lo tanto, es necesario utilizar varias imágenes diferentes para dispositivos con diferentes resoluciones de pantalla.
Las imágenes en formato SVG mantienen su calidad al escalar, ya que están dibujadas con código en lugar de píxeles.
Al utilizar el formato PNG o imágenes de mapa de bits, los desarrolladores están limitados por los píxeles. Escalar una imagen reduce su calidad. Por lo tanto, es necesario utilizar varias imágenes diferentes para dispositivos con diferentes resoluciones de pantalla.
Las imágenes en formato SVG mantienen su calidad al escalar, ya que están dibujadas con código en lugar de píxeles.
Comparación de calidad entre imágenes de mapa de bits e imágenes vectoriales
Posibilidad de modificación
Las imágenes en formato SVG se pueden animar o estilizar con CSS. Puede cambiar colores, tamaños de elementos, fuentes, etc. Los elementos de las imágenes vectoriales se pueden hacer adaptables.
Las imágenes en formato SVG se pueden animar o estilizar con CSS. Puede cambiar colores, tamaños de elementos, fuentes, etc. Los elementos de las imágenes vectoriales se pueden hacer adaptables.
Peso ligero de los archivos
Las imágenes en formato PNG se vuelven muy pesadas cuando se utiliza una alta resolución. Esto afecta negativamente la velocidad de carga de la página, lo que a su vez puede afectar los resultados del sitio en los motores de búsqueda.
Los archivos en formato JPG son un poco más ligeros que las imágenes en PNG, pero aún así son demasiado pesados. Y las imágenes SVG son código, por lo que pesan muy poco. Por lo tanto, utilice este formato sin dudarlo para crear iconos, logotipos y otros elementos de interfaz.
Las imágenes en formato PNG se vuelven muy pesadas cuando se utiliza una alta resolución. Esto afecta negativamente la velocidad de carga de la página, lo que a su vez puede afectar los resultados del sitio en los motores de búsqueda.
Los archivos en formato JPG son un poco más ligeros que las imágenes en PNG, pero aún así son demasiado pesados. Y las imágenes SVG son código, por lo que pesan muy poco. Por lo tanto, utilice este formato sin dudarlo para crear iconos, logotipos y otros elementos de interfaz.
Accesibilidad
Si las imágenes SVG contienen texto, los motores de búsqueda pueden indexarlas y mostrarlas en respuesta a las consultas de los usuarios. Los lectores de pantalla utilizados por usuarios con discapacidad visual también admiten SVG. Esto garantiza la accesibilidad de los archivos de este formato para todos los visitantes del sitio.
Si las imágenes SVG contienen texto, los motores de búsqueda pueden indexarlas y mostrarlas en respuesta a las consultas de los usuarios. Los lectores de pantalla utilizados por usuarios con discapacidad visual también admiten SVG. Esto garantiza la accesibilidad de los archivos de este formato para todos los visitantes del sitio.
Uso de SVG: prácticas comunes
Las imágenes vectoriales fueron impopulares durante mucho tiempo porque no todos los navegadores las admitían, pero ahora este problema está resuelto. Por lo tanto, el formato se utiliza activamente para resolver tareas de desarrollo web. A continuación se presentan los casos de uso más populares.
Logotipos e iconos en SVG
Los logotipos e iconos deben mantener su calidad en pantallas con cualquier resolución. La claridad es necesaria para todos los elementos de la interfaz del sitio, desde un pequeño botón hasta una pantalla de inicio.
El uso de SVG permite a los desarrolladores tener control sobre cada línea, forma y elemento de la imagen. Además, el formato facilita el posicionamiento del elemento y permite manipular sus elementos.
Los logotipos e iconos deben mantener su calidad en pantallas con cualquier resolución. La claridad es necesaria para todos los elementos de la interfaz del sitio, desde un pequeño botón hasta una pantalla de inicio.
El uso de SVG permite a los desarrolladores tener control sobre cada línea, forma y elemento de la imagen. Además, el formato facilita el posicionamiento del elemento y permite manipular sus elementos.
Infografías
Los elementos SVG se pueden actualizar dinámicamente según las acciones de los usuarios o los cambios en los datos. Por lo tanto, SVG es la opción ideal para crear mapas interactivos e infografías.
Los elementos SVG se pueden actualizar dinámicamente según las acciones de los usuarios o los cambios en los datos. Por lo tanto, SVG es la opción ideal para crear mapas interactivos e infografías.
Efectos visuales
Con SVG, es fácil crear diferentes efectos visuales, como cambiar la forma de un elemento o transformar un elemento en otro. Por ejemplo, puede cambiar la forma de las letras o transformar un logotipo en otro.
Con SVG, es fácil crear diferentes efectos visuales, como cambiar la forma de un elemento o transformar un elemento en otro. Por ejemplo, puede cambiar la forma de las letras o transformar un logotipo en otro.
Animación
SVG se puede utilizar para crear animaciones CSS, por lo que los desarrolladores frontend no necesitan aprender técnicas adicionales. También se puede utilizar SMIL SVG, una herramienta de animación de imágenes vectoriales. SMIL proporciona a los desarrolladores incluso más posibilidades que la animación CSS normal.
SVG se puede utilizar para crear animaciones CSS, por lo que los desarrolladores frontend no necesitan aprender técnicas adicionales. También se puede utilizar SMIL SVG, una herramienta de animación de imágenes vectoriales. SMIL proporciona a los desarrolladores incluso más posibilidades que la animación CSS normal.
Ilustraciones y dibujos
Las ilustraciones y dibujos normales, si no son demasiado complejos, se pueden convertir fácilmente en SVG. También es casi el formato perfecto para bocetos, diagramas, por ejemplo, para ilustraciones que muestran el principio de funcionamiento de algún mecanismo.
Las ilustraciones y dibujos normales, si no son demasiado complejos, se pueden convertir fácilmente en SVG. También es casi el formato perfecto para bocetos, diagramas, por ejemplo, para ilustraciones que muestran el principio de funcionamiento de algún mecanismo.
Interfaces y aplicaciones
SVG se utiliza para crear interfaces complejas que se integran con aplicaciones web ricas (RIA, rich internet application). Gracias a las propiedades del formato, los elementos de la interfaz son ligeros, animados y atractivos cuando es necesario.
A continuación, se explica cómo agregar correctamente archivos SVG al sitio web utilizando HTML y CSS.
A continuación, se explica cómo agregar correctamente archivos SVG al sitio web utilizando HTML y CSS.
Etiqueta img
La primera forma es especificar la URL de la imagen en el atributo src de la etiqueta img. En este caso, trabajas con el formato de la misma manera que con imágenes jpg, png, etc.
La primera forma es especificar la URL de la imagen en el atributo src de la etiqueta img. En este caso, trabajas con el formato de la misma manera que con imágenes jpg, png, etc.
<img src="circle.svg" alt="a red circle" height="100px" width="100px"/>
Esta es la forma más común de trabajar con imágenes para la mayoría de los desarrolladores. Una de las ventajas es la capacidad de utilizar la etiqueta <a> adicionalmente. Con él, se puede agregar un enlace a la imagen.
Si agrega una imagen a través de la etiqueta img, puede estilizarla con CSS. Pero no puede manipular los elementos de la imagen con JavaScript y estilos externos. Sin embargo, puede utilizar CSS en línea para cambiar el código SVG.
Si agrega una imagen a través de la etiqueta img, puede estilizarla con CSS. Pero no puede manipular los elementos de la imagen con JavaScript y estilos externos. Sin embargo, puede utilizar CSS en línea para cambiar el código SVG.
Uso de SVG en CSS
Las imágenes en formato SVG se pueden especificar en la propiedad background-image, al igual que las imágenes en otros formatos.
Las imágenes en formato SVG se pueden especificar en la propiedad background-image, al igual que las imágenes en otros formatos.
.element { background-image: url(/images/image.svg); }
Esta forma conserva todas las ventajas de las imágenes vectoriales, incluida la alta claridad en pantallas de cualquier resolución. También permite escalar, repetir y posicionar imágenes.
SVG en línea en HTML
Puede abrir un archivo SVG en cualquier editor de texto, copiar el código y agregarlo a la estructura HTML de la página. Esto se llama uso en línea de SVG.
Puede abrir un archivo SVG en cualquier editor de texto, copiar el código y agregarlo a la estructura HTML de la página. Esto se llama uso en línea de SVG.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="black"
stroke-width="4"fill="red"/>
</svg>
Este enfoque reduce la cantidad de solicitudes HTTP y acelera el tiempo de carga de la página. En las etiquetas <svg>, puede especificar clases e identificadores y utilizarlos para cambiar los estilos del elemento con CSS.
Uso de SVG en formato de código
Los archivos SVG utilizan un lenguaje basado en XML que describe imágenes vectoriales. Al igual que HTML, es un lenguaje de marcado. Pero el código SVG permite manipular elementos, por ejemplo, aplicar efectos a ellos.
El código SVG se puede agregar a la estructura HTML de la página o escribir en archivos separados. A continuación se muestra un ejemplo de cómo crear un círculo y un rectángulo con SVG.
El código SVG se puede agregar a la estructura HTML de la página o escribir en archivos separados. A continuación se muestra un ejemplo de cómo crear un círculo y un rectángulo con SVG.
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black"/>
<circle cx="150" cy="100" r="90" fill="blue"/>
</svg>
Dibujar con SVG: círculo
Para dibujar un círculo, debe especificar tres atributos:
Para dibujar un círculo, debe especificar tres atributos:
- Radio del círculo - r.
- Posición del centro del círculo en el eje x - cx.
- Posición del centro del círculo en el eje y - cy.
Es importante tener en cuenta que el color de la línea y el fondo se pueden especificar en línea o por separado.
<svg width="200" height="250">
<circle cx="400" cy="300" r="200" stroke="red" fill="transparent" stroke-width="5"/>
</svg>
Círculo dibujado utilizando el formato SVG
Dibujar con SVG: rectángulo
Crear rectángulos con SVG es similar a dibujar círculos. Solo necesita especificar las coordenadas del centro en los ejes x e y, así como la altura y el ancho para determinar el tamaño. A continuación se muestra un ejemplo de código.
Crear rectángulos con SVG es similar a dibujar círculos. Solo necesita especificar las coordenadas del centro en los ejes x e y, así como la altura y el ancho para determinar el tamaño. A continuación se muestra un ejemplo de código.
<rect x="100" y="100" width="400" height="300" stroke="black" fill="transparent" stroke-width="5"/>
Rectángulo dibujado utilizando SVG
Dibujar con SVG: línea
Para dibujar una línea, debe especificar las coordenadas en los ejes x e y de dos puntos. También puede especificar el color y el grosor de la línea.
Para dibujar una línea, debe especificar las coordenadas en los ejes x e y de dos puntos. También puede especificar el color y el grosor de la línea.
<line x1="100" x2="500" y1="110" y2="450" stroke="orange" stroke-width="5"/>
Línea recta
Dibujar con SVG: estrella
Con SVG, puede dibujar estrellas y otros polígonos. Solo necesita especificar las coordenadas de los puntos de las esquinas de la figura.
Con SVG, puede dibujar estrellas y otros polígonos. Solo necesita especificar las coordenadas de los puntos de las esquinas de la figura.
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/>
Polígono complejo en formato SVG
Dibujar con SVG: rutas
Con el elemento path, puede dibujar líneas curvas, lo que le permite crear objetos de diferentes formas. El atributo d especifica la ruta o las coordenadas de la línea curva. El comando M se utiliza para posicionamiento absoluto y m para posicionamiento relativo. El comando L especifica las coordenadas de un nuevo punto.
Aquí hay un ejemplo de uso de path:
Con el elemento path, puede dibujar líneas curvas, lo que le permite crear objetos de diferentes formas. El atributo d especifica la ruta o las coordenadas de la línea curva. El comando M se utiliza para posicionamiento absoluto y m para posicionamiento relativo. El comando L especifica las coordenadas de un nuevo punto.
Aquí hay un ejemplo de uso de path:
<path d="M 10,10 L 250,250" fill=“transparent" stroke="black"/>
Y este es un ejemplo de varias líneas dibujadas con path:
<path d="M 10,10 L 250,250 30,100 150, 50" fill="transparent" stroke="black"/>
Rutas (path) en SVG
Dibujar con SVG: curvas
Para dibujar una línea curva, se utiliza el comando C. En el siguiente ejemplo, se especifican el inicio de la curva, los puntos de desplazamiento y el final de la curva.
Para dibujar una línea curva, se utiliza el comando C. En el siguiente ejemplo, se especifican el inicio de la curva, los puntos de desplazamiento y el final de la curva.
<path d="M50 50 C 50 50, 150 100, 250 50" stroke="black" fill="transparent"/>
Con el comando S, se pueden combinar curvas y crear formas complejas.
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
Línea curva
Cómo trabajar con texto con SVG
El formato SVG permite trabajar con texto. Para ello, se utiliza la etiqueta <text>:
<text x="10" y="10">This is text.</text>
Texto normal creado con SVG
Con la propiedad stroke, puede especificar el color de la fuente. La posición del texto en la página se determina mediante las coordenadas x e y. En las propiedades stroke y fill, se pueden utilizar gradientes.
Cómo controlar las propiedades de la fuente con SVG
SVG permite controlar las siguientes propiedades de la fuente:
SVG permite controlar las siguientes propiedades de la fuente:
- font-family
- font-style
- font-weight
- font-variant
- font-stretch
- font-size
- font-size-adjust
- kerning
- letter-spacing
- word-spacing
- text-decoration
Con la etiqueta <tspan>, puede seleccionar una o varias palabras en el texto y cambiar sus propiedades.
<text>
This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>
SVG también permite voltear el texto, cambiar el color de la línea y el relleno de las letras y realizar otras transformaciones. A continuación se muestra un ejemplo de creación de un contorno de texto escrito de derecha a izquierda. Esto se logra mediante las propiedades direction y unicode-bidi.
<text x="350" y="50" style="fill: none; stroke: #000000; font-size: 48px; direction: rtl; unicode-bidi: bidi-override;">This is text</text>
Texto volteado
Con <textPath>, puede vincular texto a rutas. Esto se hace mediante el atributo xlink:href:
<path id="my_path" d="M 40,40 C 200,100 10,100 520,200"
fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
This Text is Curved
</textPath>
</text>
Cómo utilizar CSS en SVG
El código CSS se puede especificar en línea en el código SVG:
<svg width="350" height="60">
<text>
This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>
<style><![CDATA[
text{
dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
Este tipo de trabajo con Bootstrap permite crear algo más que un simple prototipo, una página de destino o un panel de administración. En Códica, utilizamos Bootstrap en el tercer proyecto de maquetación para crear la apariencia de un chat completo.
<svg class="logo" width="400" height="400" viewBox="0 0 400 400">
<rect class="box" x="0" y="0" width="400" height="400" fill="#56A0D3"/>
</svg>
Puede trabajar con esta clase en CSS:
.box { fill: red; }
Una traducción adaptada del artículo All you need to know about SVG en la web de Richard Mattka. La opinión del autor de la publicación original puede no coincidir con la opinión de la redacción de Códica.
Leer otros artículos de Blog
Lee otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.