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.
Tentang Obat Klg Asli
Hace 8 años
11 comentarios:
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
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
Vota a la encuesta q he puesto
plis
gracias saludos
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.
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
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 :)
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.
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...
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
muy bueno gracias por compartir!!!
creo que me será muy pero que muy útil, gracias de verdad.
Publicar un comentario