jueves, 8 de enero de 2009

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.

11 comentarios:

Iván dijo...

Hola gracias por pasarte por mi blog, me parece buena idea que pongas un enlaces de blogs,lo de los rayos que dices de plasma jajaja quedan muy bien, y lo de efecto tv tambien queda bien yo lo e echo y es muy facil por hacer, bueno q te parece el otro efecto rayo en movimiento????
saludos

Iván dijo...

Hola es verdad si nso quitan el efecto cubismo n oprodiamos ahcer ese rayo y muchas cosas chulas, he visto que ya has epsuto lo d elos enlaces jiji, me e pesuot como seguidor, vale, ahora voy a actualizar otra cosas haber q te pareze

Iván dijo...

Vota a la encuesta q he puesto
plis
gracias saludos

Anónimo dijo...

Con esta entrada te habrías ganado un fiel seguidor, de no ser porque ya lo era antes, jeje.

En serio, gracias, es justo lo que llevaba un tiempo pensando y nunca me ponía a intentar.

ZuperTruko dijo...

Gracias. La verdad es que me costó dar con el problema que comenté de Inkscape, ya que me ocurría lo de que no se adaptaba el tamaño del dibujo SVG al hueco que le hacía en el documento HTML.

Estaría bien que Inkscape tuviera algo similar a "exportar una copia para web", que haga lo que explico automáticamente sin tener que trastear el código fuente. Un caso similar es este, que cuenta que tampoco se adapta el tamaño al hueco:

https://answers.launchpad.net/inkscape/+question/55093

Anónimo dijo...

Sí, me he dado cuenta de que cuando un archivo pasa por Inkscape el código se "guarrea", se llena de parámetros que sólo interesan a este programa y hacen más pesado el archivo.

De ahí que esa función que comentas de "exportar para web" me parecería doblemente útil :)

Anónimo dijo...

No debes usar embed, ya que es un elemento no estándar. Para esto está el elemento object:
http://www.w3.org/TR/html401/struct/objects.html

@JT: Prueba a seleccionar el formato "SVG plano" en lugar de "SVG de Inkscape" al guardar tu archivo.

Anónimo dijo...

Gracias, anónimo ;)

Probaré ese formato a ver qué hace.

Parece que es delicado estar editando con Inkscape y con el editor de texto por turnos, cada vez que se guarda pasa algo raro...

JT dijo...

Aquí se explica una forma de usar OBJECT de forma que todos los navegadores (incluido IE) lo muestren bien.

http://www.spartanicus.utvinternet.ie/embed.htm

Pablo dijo...

muy bueno gracias por compartir!!!

Anónimo dijo...

creo que me será muy pero que muy útil, gracias de verdad.