Introducción a SVG

SVG (Scalable Vector Graphics) especifica gráficos basados en vectores en formato XML. Para trabajar con él, es necesario tener una comprensión básica de HTML y XML.

SVG se utiliza para especificar gráficos basados en vectores para la web. Cada elemento y atributo en los archivos SVG puede ser animado. SVG es una recomendación del W3C. Se integra con otros estándares del W3C, como el DOM y XSL.

Ventajas de usar SVG

El uso de SVG en lugar de otros formatos de imagen, como JPEG y GIF, tiene muchas ventajas. En particular:

• Las imágenes SVG pueden generarse y modificarse con cualquier editor de texto.
• Las imágenes SVG pueden controlarse mediante scripts, indexarse, buscarse y comprimirse.
• Puedes imprimir imágenes SVG con alta calidad a cualquier resolución.
• Las imágenes SVG pueden escalarse y ampliarse.
• Los gráficos SVG no pierden calidad al ampliarse o redimensionarse.
• SVG es un estándar abierto.

Creación de imágenes SVG

Puedes crear imágenes SVG con cualquier editor de texto. Sin embargo, crearlas con un programa de dibujo, como Inkscape, suele ser más adecuado.

Incrustación de SVG en HTML

Los archivos SVG utilizan la extensión .svg y son compatibles con todos los navegadores modernos. Puedes incrustarlos en HTML usando la etiqueta <code><img></code> o marcado en línea. Una estructura SVG básica se ve así:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Práctica

¿Qué puedes decir sobre SVG en HTML?

SVG significa Gráficos Vectoriales Escalables.SVG se utiliza para describir gráficos vectoriales 2D en formato XML.SVG puede animarse e interactuarse con JavaScript.Los archivos SVG no son escalables y, por lo tanto, se pixelan al hacer zoom.SVG se utiliza para describir gráficos 3D.