SVG es un dialecto que describe los elementos que componen una gráfica vectorial.
El SVG (Scalable Vector Graphics) deriva de XML (eXtensible Markup Language) y se parece mucho a HTML (HyperText Markup Language).
Con el markup de SVG se describen elementos gráficos; se describen elementos tales como un círculo:
<circle cx="100" cy="100" r="100" />
Noten que los atributos de este elemento gráfico describen la ubicación de un centro, según coordenadas x e y, además de describir su radio (clave en su descripción geométrica).
Cada elemento gráfico tendrá una ubicación en el lienzo de SVG. Cada ubicación dependerá de coordenadas, cuyo origen está a la izquierda y arriba.
Los números crecen hacia la derecha y abajo, partiendo en cero y llegando hasta donde determine el atributo viewBox, como en
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 7"></svg>
Para cada elemento gráfico en el lienzo de SVG, los atributos deben describir su ubicación y geometría.
Obviamente, corresponden distintas descripciones geométricas para líneas, trazados, polígonos, textos e imágenes. Por ejemplo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="tomato"/>
<text x="75" y="10" font-size="8">HOLA</text>
<line x1="0" y1="0" x2="100" y2="100" stroke="black" />
<polygon points="75,25 25,50 50,75" />
<image x="2" y="70" width="25" height="25" href="img/rusa.svg" />
</svg>
Cuando trabajamos con Adobe Illustrator, y con la mayoría de los editores de gráfica vectorizada, podemos guardar como SVG
Un SVG guardado en Adobe Illustrator puede abrirse en un editor de código fuente, para verse más o menos así:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 500" style="enable-background:new 0 0 1000 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF6347;}
.st1{font-family:'ArialMT';}
.st2{font-size:24px;}
</style>
<image style="overflow:visible;enable-background:new;" width="2000" height="1000" xlink:href="fondo.png" transform="matrix(0.5 0 0 0.5 0 0)">
</image>
<text transform="matrix(1 0 0 1 520 70)" class="st0 st1 st2">NORTH AMERICAN P-51D MUSTANG</text>
</svg>
Lo que puede simplificarse por reducción razonada, considerando que no necesitamos los comentarios antes de la etiqueta que abre el elemento svg, y en la misma etiqueta sólo necesitamos de dos atributos,
el xmlns y el viewBox
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500">
<style type="text/css">
.st0{fill:#FF6347;}
.st1{font-family:'ArialMT';}
.st2{font-size:24px;}
</style>
<image width="2000" height="1000" href="fondo.png" transform="matrix(0.5 0 0 0.5 0 0)">
</image>
<text transform="matrix(1 0 0 1 520 70)" class="st0 st1 st2">NORTH AMERICAN P-51D MUSTANG</text>
</svg>
Noten que en el CSS incrustado tenemos tres clases, desde .st0 hasta .st2, que fue lo que consideró necesario el SVG Export Plug-In para describir el
<text></text> contenido en el SVG que se ve de la siguiente manera: