SVG en línea HTML5

HTML5 admite SVG en línea.

¿Qué es SVG?

  • SVG se refiere a Gráficos Vectoriales Escalables (Scalable Vector Graphics)
  • SVG se utiliza para definir gráficos vectoriales basados en la red
  • SVG utiliza el formato XML para definir gráficos
  • Las imágenes SVG no pierden calidad gráfica al ampliarlas o cambiar su tamaño
  • SVG es un estándar de la World Wide Web Consortium

Ventajas de SVG

En comparación con otros formatos de imágenes (como JPEG y GIF), las ventajas de usar SVG son:

  • Las imágenes SVG se pueden crear y modificar con un editor de texto
  • Las imágenes SVG se pueden buscar, indexar, scriptear o comprimir
  • SVG es escalable
  • Las imágenes SVG se pueden imprimir a alta calidad en cualquier resolución
  • SVG se puede ampliar sin que la calidad de la imagen disminuya

Soporte del Navegador

Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten SVG en línea.

Insertar SVG directamente en la página HTML

En HTML5, puede insertar elementos SVG directamente en las páginas HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" altura="190">
  <polygon puntos="100,10 40,180 190,60 10,60 160,180"
  style="relleno:lime;trazo:purple;ancho_de_trazo:5;regla_de_relleno:evenodd;" />
</svg>

</body>
</html>

Pruebe usted mismo

Resultados:

Tutoriales de SVG

Para aprender más sobre SVG, visite nuestra Tutoriales de SVG.