John Donne said that no man is an island, and likewise SVG does not exist in isolation. Of course, you can view SVG images on their own, as an independent file in your web browser or SVG viewer. Many of the examples in this book work that way. But in other cases, you will want your graphic to be integrated in a larger document, which contains paragraphs of text, forms, or other content that cannot easily be displayed using SVG alone. This chapter describes various ways of integrating SVG within HTML and other document types.
Figure 1-1 shows the cat drawing from another chapter of SVG Essentials, inserted into an HTML page in four different ways. The results look almost identical, but each method has benefits and limitations.
SVG is an image format, and as such it can be included in HTML pages in the same ways as other image types. There are two approaches: you can include the image within the HTML markup in an <img> element (recommended when the image is a fundamental part of the page’s content); or you can insert the image as a CSS style property of another element (recommended when the image is primarily decorative).
Scalable Vector Graphics o SVG, es un lenguaje de marcado para crear imágenes basadas en vectores. Como estas imágenes se crean en código y no en píxeles, pueden escalarse a cualquier tamaño sin pixelarse. Es la misma forma en que las fuentes pueden verse claras a cualquier tamaño. Además, como se trata de un código, se puede editar la imagen para cambiar su apariencia y adaptarla a ventanas de visualización más pequeñas, cambiar los colores para que se ajusten al modo oscuro o incluso añadir efectos hover.
Esto incluye el código de la imagen dentro del HTML, lo que significa que la imagen puede seguir viéndose incluso con las imágenes desactivadas. Además, hay que tener en cuenta que esto también aumenta el tamaño del archivo del correo electrónico, por lo que incluir una imagen complicada puede hacer que el tamaño del archivo supere los 100 kb y provocar problemas con la velocidad de envío, la capacidad de entrega y el recorte en Gmail.
Para ayudar a que esto funcione con la tecnología de asistencia, he establecido un role=”img” en la etiqueta <svg> y he incluido un <title> dentro de ella donde he establecido el texto alt. Si tu imagen es puramente decorativa y no añade ninguna información significativa, puedes dejar ambos elementos desactivados.
Los gráficos vectoriales son muy útiles en muchas circunstancias: tienen un tamaño de archivo pequeño y son altamente escalables, por lo que no se pixelan cuando se amplía el tamaño o se hace más grande. En este artículo te mostraremos cómo incluir uno en tu página web.
Para que te hagas una idea de la diferencia entre ambos, veamos un ejemplo. Puedes encontrar este ejemplo en nuestro repositorio de GitHub como vector-versus-raster.html – muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. La diferencia es que la de la izquierda es un PNG y la de la derecha es una imagen SVG.
La diferencia se hace evidente al ampliar la página: la imagen PNG se pixela al ampliarla porque contiene información sobre dónde debe estar cada píxel (y de qué color). Cuando se amplía, cada píxel aumenta de tamaño para llenar varios píxeles en la pantalla, por lo que la imagen empieza a parecer un bloque. La imagen vectorial, sin embargo, sigue teniendo un aspecto agradable y nítido, ya que, sea cual sea su tamaño, los algoritmos se utilizan para elaborar las formas de la imagen, y los valores se escalan a medida que aumenta su tamaño.
Imágenes SVG Capítulo 18. Gráficos Imágenes SVGLos gráficos vectoriales escalables (SVG), una recomendación del W3C, son “un lenguaje para describir gráficos bidimensionales vectoriales y mixtos vector/raster en XML”. En otras palabras, se pueden dibujar imágenes con elementos XML. A continuación se muestra un pequeño ejemplo que dibuja tres círculos:<?xml version=”1.0″?>
Cuando se renderiza, esta imagen SVG tiene el siguiente aspecto:SVG tiene algunas ventajas interesantes:Aunque podría incluir los datos de la imagen SVG directamente en su archivo DocBook (dentro de un elemento imageobject, en lugar de un elemento imagedata), probablemente querrá mantener cada imagen en un archivo separado. Entonces puede incluir la imagen como lo haría con otros gráficos:<mediaobject id=”MousePicture”>
</mediaobject>Asegúrese de incluir el atributo format=”SVG” para asegurarse de que el archivo se maneja correctamente. El soporte de SVG en los procesadores XSL-FO no es completo. El procesador XEP FO de RenderX y el procesador XSL Formatter de Antenna House tienen un soporte sustancial para SVG en sus productos actuales. Sin embargo, es posible que algunos elementos SVG no sean compatibles, por lo que debe consultar la documentación del procesador para obtener más detalles. Apache FOP utiliza el Batik SVG Toolkit para renderizar gráficos SVG. Asegúrese de incluir el archivo batik.jar en su CLASSPATH cuando intente renderizar SVG con FOP (se incluye en los scripts de conveniencia de FOP).SVG DTDOUn problema que puede encontrar al procesar archivos SVG con un procesador XSL-FO es la referencia DTD en los archivos SVG. La mayoría de los archivos SVG contienen una declaración DOCTYPE similar a la siguiente (la versión puede variar):<! DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//ES”