SVG en una página web

Meter un fichero en una página web no es en principio difícil, basta con añadir esta etiqueta:

<
EMBED SRC="mifichero.svg" ALIGN="left" WIDTH="tamaño" HEIGHT="tamaño"
>

En principio cualquier persona con un navegador compatible con SVG podría visualizar el fichero. Al ser SVG un formato vectorial, se puede agrandar la imagen sin que esta se vuelva borrosa o se muestre pixelada, para ello basta dar valores a las variables WIDTH y HEIGHT.

A veces surge un problema con ciertos editores (como Inkscape en la versión 0.46 o menor), y es que incluyen ellos ya un tamaño específico para la imágen, con lo que al cargar la imágen en una página web, y darla un tamaño diferente, esta no cambia de tamaño como debiera, dejando márgenes vacíos o apareciendo recortada. Explicado de otra forma, la imágen no se adapta al tamaño especificado por el conenedor creado antes con la etiqueta EMBED.

Con un editor de texto se puede resolver este problema, basta abrir la imagen SVG en un editor de texto (Gedit, Mousepad, Bloc de notas...) y añadir dentro de la etiqueta SVG el siguiente texto: viewBox="0 0 100 120", habría que sustituir 100 por el tamaño horizontal y 120 por el vertical de la imagen (estos valores aparecen en las variables width y height de esa etiqueta). Además, hay que modificar los valores de las variables width y height, sustituyendo su valor por "100%".

En Inkscape la etiqueta SVG suele quedar más o menos por el principio del documento.

El cambio sería este, Inkscape podría dejar el fichero SVG así:

< svg
...
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="120"
id="svg2"
...
>
...

y modificado quedaría así:

< svg
...
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
viewBox="0 0 100 120"
id="svg2"
...
>
...

Hecho esto, la imágen se adaptará automáticamente al tamaño del contenedor que se le asigne con la etiqueta EMBED explicada al principio.