Fundamentos de HTML SVG

En este artículo, conoceremos los conceptos básicos de HTML SVG y su implementación a través de los ejemplos. SVG significa Gráficos vectoriales escalables. Básicamente define gráficos basados ​​en vectores en formato XML. Los gráficos SVG NO pierden calidad si se amplían o redimensionan. Cada elemento y cada atributo en los archivos SVG se pueden animar.

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.

Diferencias entre HTML SVG y HTML Canvas:

  • SVG es un lenguaje para describir gráficos 2D en XML, mientras que Canvas dibuja gráficos 2D sobre la marcha con JavaScript.
  • Si se cambian los atributos de un objeto SVG, el navegador puede volver a representar automáticamente la forma, mientras que Canvas se representa píxel por píxel. En el lienzo, una vez que se dibuja el gráfico, el navegador lo olvida.
  • SVG es independiente de la resolución, mientras que CANVAS depende de la resolución.
  • SVG admite controladores de eventos, mientras que CANVAS no admite controladores de eventos.

Ejemplo 1: en este ejemplo, creamos una línea SVG en HTML.

HTML

<!DOCTYPE html>
<html>
 
<body>
  <h2>Welcome To GeeksforGeeks</h2>
  <svg height="250" width="600">
    <line x1="10" y1="10" x2="400" y2="400"
          style="stroke:rgb(0,0,255);stroke-width:3" />
  </svg>
</body>
 
</html>

Producción:

Dibujo lineal SVG

Ejemplo 2: dibujar un círculo SVG en HTML

HTML

<!DOCTYPE html>
<html>
 
<body>
  <!-- html svg tag is used here -->
  <svg width="200" height="200">
    <circle cx="80" cy="80" r="50" stroke="black"
            stroke-width="2" fill="grey" />
  </svg>
</body>
 
</html>

Producción:

Dibujo de círculo SVG

Ejemplo 3: dibujar un rectángulo SVG en HTML

HTML

<DOCTYPE html>
  <html>
 
  <body>
    <!-- html svg tag is used here -->
    <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>
  </body>
 
  </html>

Producción:

Dibujo de rectángulo SVG

Ejemplo 4: dibujar un rectángulo redondeado SVG en HTML

HTML

<!DOCTYPE html>
<html>
 
<body>
  <!-- html svg tag is used here -->
  <svg width="400" height="380">
    <rect x="80" y="20" rx="20"
          ry="20" width="150"
          height="150"
      style="fill: orange;
             stroke: black;
             stroke-width: 2;
             opacity: 0.5" />
  </svg>
</body>
 
</html>

Producción:

Dibujo de rectángulo redondeado SVG

Ejemplo 5: dibujar una estrella SVG en HTML 

HTML

<!DOCTYPE html>
<html>
 
<body>
  <!-- html svg tag is used here -->
  <svg width="300" height="200">
    <polygon points="100,10 40,198 190,78 10,78 160,198"
      style="fill: grey; stroke: orange;
             stroke-width: 5; fill-rule: evenodd" />
  </svg>
</body>
 
</html>

Producción:

 Dibujo de estrella SVG

Ejemplo 6: dibujar un logotipo en HTML usando SVG

HTML

<!DOCTYPE html>
<html>
 
<body>
   
  <!-- html svg tag is used here -->
  <svg height="300" width="700">
    <defs>
      <linearGradient id="grad1" x1="0%"
                      y1="0%" x2="100%"
                      y2="0%">
        <stop offset="0%"
              style="stop-color: white; stop-opacity: 1" />
        <stop offset="100%"
              style="stop-color: green; stop-opacity: 1" />
      </linearGradient>
    </defs>
    <ellipse cx="200" cy="100"
             rx="120" ry="80"
             fill="url(#grad1)" />
    <text fill="#ffffff" font-size="22"
          font-family="ARIAL"
          x="120" y="110">
      GeeksforGeeks
    </text>
  </svg>
</body>
 
</html>

Producción:

Logotipo de GFG usando SVG

Navegadores compatibles: 

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.0
  • Ópera 10.1
  • Safari 3.2

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *