El elemento <title>
El elemento <title> se usa para añadir un breve texto de título a un documento o elemento dentro de un contexto SVG. El texto no aparece visualmente al visualizar la imagen SVG, sino que se suele utilizar como metadato, es decir, información disponible para tener contexto, y que podría ser interesante desde un punto de accesibilidad.
<svg viewBox="0 0 10 10" height="200">
<title>Rectángulo color indigo</title>
<rect x="3" y="3" width="5" height="5" fill="indigo" />
</svg>
El elemento
<title>se puede utilizar múltiples veces, anidándolo en el interior de ciertas formas o elementos para describir dichos elementos. Si lo tenemos como el ejemplo anterior, como hijo del<svg>, describe al documento SVG completo.
El elemento <desc>
Si necesitamos incluir mucho más texto a modo de descripción, es mejor utilizar la etiqueta <desc>. Nos permite añadir un texto descriptivo y más largo que el que añadiríamos a un <title>.
<svg viewBox="0 0 10 10" height="200">
<title>Rectángulo color indigo</title>
<desc>Este rectángulo representa la potencia de SVG
para dibujar elementos gráficos desde un contexto
simple como HTML.</desc>
<rect x="3" y="3" width="5" height="5" fill="indigo" />
</svg>
Nuevamente, ten en cuenta que estos textos son útiles en cuanto a añadir metadatos, es decir, información adicionales que no se verá visualmente, sino que simplemente se incorpora al archivo para darle contexto e información y que los sistemas puedan interactuar con dicha información (por ejemplo, en términos de SEO o posicionamiento en buscadores).
El elemento <metadata>
En el caso de que necesitemos introducir información en un archivo SVG de forma estructurada, podríamos hacer uso de la etiqueta <metadata>. Esta etiqueta contenedora, permite que dentro podamos incluir información XML, RDF y una amplia variedad de formatos.
El elemento <switch>
Mediante la etiqueta <switch> podemos evaluar ciertas condiciones y mostrar una información u otra, es decir, hacer «switch» y cambiar a un dato concreto dependiendo de una condición particular.
Generalmente, se utiliza el atributo systemLanguage, mediante el cuál le podemos indicar el código de un idioma, o una lista de ellos separados por comas, de modo que si el navegador está utilizando un navegador con ese idioma, muestre el elemento indicado:
<svg viewBox="0 0 10 10" height="200">
<switch>
<rect systemLanguage="ar" x="1" y="1" width="5" height="5" fill="steelblue" />
<rect systemLanguage="es" x="1" y="1" width="5" height="5" fill="red" />
</switch>
<switch>
<rect systemLanguage="es" x="8" y="8" width="2" height="2" fill="black" />
</switch>
<switch>
<rect systemLanguage="fr" x="8" y="8" width="2" height="2" fill="green" />
</switch>
</svg>
En nuestro ejemplo, tenemos 3 elementos <switch>. El primero de ello muestra un cuadrado azul si Español (Argentina) está entre las preferencias del usuario. En el caso de tener Español (España), mostrará el cuadrado rojo.
Luego, en el segundo <switch>, el cuadrado negro sólo se mostrará si incluye el idioma Español (España). Por último, en el tercer <switch> se apreciará un cuadrado verde si el usuario tiene el idioma Francés en sus preferencias.
