Tutorial SVG
SVG significa Gráficos vectoriales escalables.
SVG define gráficos basados en vectores en formato XML.
Ejemplos en cada capítulo
Con nuestro editor "Pruébelo usted mismo", puede editar el SVG y hacer clic en un botón para ver el resultado.
Ejemplo de SVG
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Lo que ya debes saber
Antes de continuar, debe tener una comprensión básica de lo siguiente:
- HTML
- XML básico
Si desea estudiar estos temas primero, busque los tutoriales en nuestra página de inicio .
¿Qué es SVG?
- SVG significa gráficos vectoriales escalables
- SVG se utiliza para definir gráficos basados en vectores para la Web
- SVG define los gráficos en formato XML
- Cada elemento y cada atributo en los archivos SVG se pueden animar
- SVG es una recomendación del W3C
- SVG se integra con otros estándares W3C como DOM y XSL
SVG es una recomendación del W3C
SVG 1.0 se convirtió en una recomendación del W3C el 4 de septiembre de 2001.
SVG 1.1 se convirtió en una recomendación del W3C el 14 de enero de 2003.
SVG 1.1 (segunda edición) se convirtió en una recomendación del W3C el 16 de agosto de 2011.
Ventajas de SVG
Las ventajas de usar SVG sobre otros formatos de imagen (como JPEG y GIF) son:
- Las imágenes SVG se pueden crear y editar con cualquier editor de texto
- Las imágenes SVG se pueden buscar, indexar, codificar y comprimir
- Las imágenes SVG son escalables
- Las imágenes SVG se pueden imprimir con alta calidad en cualquier resolución
- Las imágenes SVG son ampliables
- Los gráficos SVG NO pierden calidad si se amplían o redimensionan
- SVG es un estándar abierto
- Los archivos SVG son XML puro
Creación de imágenes SVG
Las imágenes SVG se pueden crear con cualquier editor de texto, pero a menudo es más conveniente crear imágenes SVG con un programa de dibujo, como Inkscape .