MEJOR SITIO PARA DESARROLLADORES WEB
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django CÓMO W3.CSS AI Más 🔍 ◑ Libros REFERENCIAS EJERCICIOS
HTML5 Lecciones para principiantes

Ua En De

HTML SVG Gráficos

❮ Prev Next ❯

SVG define gráficos basados en vectores en formato XML.

¿Qué es SVG?

  • SVG significa gráficos vectoriales escalables
  • SVG se utiliza para definir gráficos para la Web
  • SVG es una recomendación del W3C

El elemento HTML <svg>

El elemento HTML <svg> es un contenedor para gráficos SVG.

SVG tiene varios métodos para dibujar trazados, cuadros, círculos, texto e imágenes gráficas.

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento <svg>.

Elemento
<svg> 4.0 9.0 3.0 3.2 10.1

SVG Círculo

Ejemplo

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Inténtalo tú mismo »

SVG Rectángulo



Ejemplo

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Inténtalo tú mismo »

SVG Rectángulo redondeado

Lo sentimos, su navegador no admite SVG en línea.

Ejemplo

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Inténtalo tú mismo »

SVG Estrella

Lo sentimos, su navegador no admite SVG en línea.

Ejemplo

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Inténtalo tú mismo »

SVG Logo

SVG Lo sentimos, su navegador no admite SVG en línea.

Ejemplo

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Lo sentimos, su navegador no admite SVG en línea.
</svg>
Inténtalo tú mismo »

Diferencias entre SVG y Canvas

SVG es un lenguaje para describir gráficos 2D en XML.

Canvas dibuja gráficos 2D, sobre la marcha (con JavaScript).

SVG está basado en XML, lo que significa que todos los elementos están disponibles dentro del DOM de SVG. Puede adjuntar controladores de eventos de JavaScript para un elemento.

En SVG, cada forma dibujada se recuerda como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede volver a representar la forma automáticamente.

El lienzo se representa píxel a píxel. En el lienzo, una vez dibujado el gráfico, el navegador lo olvida. Si se debe cambiar su posición, es necesario volver a dibujar toda la escena, incluidos los objetos que puedan haber sido cubiertos por el gráfico.

Comparación de Canvas y SVG

La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG:

Canvas SVG
  • Depende de la resolución
  • No hay soporte para controladores de eventos
  • Pobres capacidades de representación de texto
  • Puedes guardar la imagen resultante como .png o .jpg
  • Muy adecuado para juegos con muchos gráficos
  • Resolución independiente
  • Soporte para controladores de eventos
  • Más adecuado para aplicaciones con grandes áreas de renderizado (Google Maps)
  • Renderizado lento si es complejo (cualquier cosa que use mucho el DOM será lenta)
  • No apto para aplicaciones de juegos

SVG Tutorial

Para obtener más información sobre SVG, lea nuestro Tutorial de SVG.

❮ Prev Next ❯

✍ Comentarios