SVG - Descripción general

¿Qué es SVG?

  • SVG, Scalable Vector Graphics es un lenguaje basado en XML para definir gráficos basados ​​en vectores.

  • SVG está diseñado para mostrar imágenes en la web.

  • Al ser imágenes vectoriales, la imagen SVG nunca pierde calidad, sin importar cómo se reduzcan o redimensionen.

  • Las imágenes SVG admiten interactividad y animación.

  • SVG es un estándar W3C.

  • Otros formatos de imagen, como las imágenes rasterizadas, también se pueden combinar con imágenes SVG.

  • SVG se integra bien con XSLT y DOM de HTML.

Ventajas

  • Utilice cualquier editor de texto para crear y editar imágenes SVG.

  • Al estar basadas en XML, las imágenes SVG se pueden buscar, se pueden indexar y se pueden escribir y comprimir.

  • Las imágenes SVG son altamente escalables, ya que nunca pierden calidad, sin importar cómo se reduzcan o redimensionen

  • Buena calidad de impresión en cualquier resolución

  • SVG es un estándar abierto

Desventajas

  • El tamaño del formato de texto es mayor que el de las imágenes ráster con formato binario.

  • El tamaño puede ser grande incluso para imágenes pequeñas.

Ejemplo

El siguiente fragmento XML se puede utilizar para dibujar un círculo en el navegador web.

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

Incruste el XML SVG directamente en una página HTML.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. En Internet Explorer, se requieren controles ActiveX para ver imágenes SVG.

Cómo se integra SVG con HTML

  • El elemento <svg> indica el inicio de la imagen SVG.

  • Los atributos de ancho y alto del elemento <svg> definen el alto y el ancho de la imagen SVG.

  • En el ejemplo anterior, usamos un elemento <circle> para dibujar un círculo.

  • El atributo cx y cy representa el centro del círculo. El valor predeterminado es (0,0). El atributo r representa el radio del círculo.

  • Otros atributos de trazo y ancho de trazo controlan el contorno del círculo.

  • El atributo de relleno define el color de relleno del círculo.

  • Cerrar la etiqueta </svg> indica el final de la imagen SVG.