SVG

• Descripción de formas geométricas básicas (polígonos, rectángulos, círculos, etc.).
• Una amplia gama de propiedades visuales que se pueden aplicar a formas y trazados: coloración, transparencia, esquinas redondeadas, etc.
• interactividad _ En cada elemento individual y en la imagen completa, puede colgar un controlador de eventos (clic, mover, pulsar una tecla, etc.), para que el usuario pueda controlar la imagen (por ejemplo, mover algunos elementos con el mouse [1] ).
• Animación y guiones. Usando ECMAScript o JavaScript , puede describir incluso los escenarios más complejos relacionados con los cálculos matemáticos de las coordenadas y proporciones de las formas. Junto con la interactividad y la animación SMIL , esto brinda una gama muy amplia de posibilidades para los desarrolladores de gráficos web.

Ventajas de la

• Formato de texto: los archivos SVG se pueden leer y editar (con algunas habilidades) utilizando editores de texto comunes . Al ver documentos que contienen gráficos SVG, tiene acceso para ver el código del archivo que se está viendo y la capacidad de guardar el documento completo. Además, los archivos SVG tienden a ser más pequeños que las imágenes JPEG o GIF comparables y se comprimen bien.
• Escalable-SVG es un formato vectorial . Es posible ampliar cualquier parte de una imagen SVG sin perder calidad. Además, es posible aplicar filtros a los elementos de un documento SVG, modificadores especiales para crear efectos similares a los que se utilizan al procesar imágenes de mapa de bits (desenfoque, extrusión, sistemas de transformación complejos, etc.). En el texto del código SVG, los filtros se describen mediante etiquetas que representa el espectador, lo que no afecta el tamaño del archivo de origen, al tiempo que proporciona la expresividad ilustrativa necesaria.
• El uso de gráficos de mapa de bits en documentos SVG está ampliamente disponible. Puede insertar elementos con imágenes PNG, GIF o JPG.
• El texto de un gráfico SVG es texto, no una imagen, por lo que se puede seleccionar y copiar, los motores de búsqueda lo indexan y no es necesario crear metarchivos adicionales para los robots de búsqueda .
• La animación está implementada en SVG usando el lenguaje SMIL (Synchronized Multimedia Integration Language), también desarrollado por el consorcio W3C. Se admiten lenguajes de secuencias de comandos basados ​​en la especificación ECMAScript . Los elementos SVG se pueden manipular con JavaScript . El uso de scripts y animaciones en SVG te permite crear gráficos dinámicos e interactivos. En SVG, se proporciona un modelo de eventos, se rastrean los eventos ( carga de la página, cambio de sus parámetros, mouse, eventos del teclado, etc. ). La animación se puede desencadenar por un evento específico (por ejemplo , "onmouseover" o "onclick" ), lo que hace que los gráficos sean interactivos. Cada elemento tiene sus propios eventos a los que se pueden adjuntar scripts individuales.
• SVG es un estándar abierto. A diferencia de otros formatos, SVG no es propietario.
• Los documentos SVG se integran fácilmente con documentos HTML y XHTML. Los SVG externos se conectan a través de la etiqueta <object> , el valor del atributo de datos es el nombre del archivo con la extensión ".svg" que contiene el marcado SVG y tiene el tipo MIME image/svg+xml. Los atributos de ancho y alto definen las dimensiones horizontales y verticales del área SVG. Los elementos SVG son compatibles con HTML y DHTML.
• Compatibilidad con CSS ( English  Cascading Style Sheets ). La visualización (formato y decoración) de los elementos SVG se puede controlar a través de la hoja de estilo CSS 2.0 y sus extensiones, o directamente a través de los atributos de los elementos SVG.
• SVG proporciona todos los beneficios de XML :
  • Capacidad para trabajar en diversos entornos.
  • Internacionalización (soporte para Unicode ).
  • Amplia disponibilidad para diversas aplicaciones.
  • Fácil modificación a través de API estándar  como DOM . SVG es compatible con el modelo de objeto de documento W3C estandarizado DOM, que brinda acceso a cualquier elemento, lo que brinda amplias oportunidades para cambiar dinámicamente los elementos, sus atributos y eventos.
  • Fácil conversión con hojas de estilo XSLT . Como cualquier formato basado en XML, SVG le permite usar tablas de transformación (XSLT) para procesarlo. Al convertir datos XML a SVG usando XSL simple , puede obtener fácilmente una representación gráfica de cualquier dato, por ejemplo, visualizar moléculas químicas descritas en CML .

Desventajas del formato

• No hay soporte para gráficos 3D en absoluto.
• SVG hereda todas las desventajas de XML , como un gran tamaño de archivo (sin embargo, esto último se compensa con la existencia de un formato SVGZ comprimido , pero actualmente su uso es difícil, ya que SVGZ no tiene un tipo MIME propio ).
• Difícil de usar en grandes aplicaciones cartográficas debido a que el documento debe leerse en su totalidad para poder visualizar correctamente una pequeña parte de la imagen.
• Cuantos más detalles finos haya en la imagen, más rápido crecerá el tamaño de los datos SVG. Un caso extremo es cuando la imagen es ruido blanco . En este caso, SVG no solo no ofrece ninguna ventaja en cuanto al tamaño del archivo, sino incluso una pérdida en comparación con el formato de mapa de bits. En la práctica, SVG deja de ser rentable mucho antes de que la imagen alcance la etapa de ruido blanco.

Estructura de un documento SVG

La primera línea es un encabezado XML estándar, una declaración ( eng.  Declaración XML ), que indica la versión de XML (versión) ( generalmente "1.0" ) y la codificación de caracteres (codificación):