incrustar SVG con HTML

vieiras · #1 (**permalink**) 27/10/2007, 10:16

Buenas! Mi problema es que estoy pegandome de barrigazos en cómo narices incrustar un fichero SVG en un documento HTML y no consigo que se visualice correctamente. Hice un pequeño estudio usando tres navegadores:

>>> E S T U D I O <<<

>>> index.html codigo HTML :

Código HTML:

<!-- Estas son las cabeceras para cumplir el estandar W3C-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<!-- Aqui dentro del head ponemos el tipo de documento y la codificacion de caracteres del mismo-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>   web de prueba   </title>

</head>

<body bgcolor="#000000"><!--  Aqui le pongo color de fondo al cuerpo de la pagina-->

  <!--Ahora incrusto un objeto de tipo svg pero sigue sin visualizarse bien -->

  <center><object type="image/svg+xml" data="milogo.svg" width="275" height="82">
  Necesitas algun plugin para ver SVG. Busca por la red. 
  </object>
  </center>

  <!--  Este codigo solamente lo puedes poner si la pagina esta validada por el w3c :)  -->

  <p align="center">
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
</body>
</html>

>>> >>> <<< < >> < >> >
>>> >>> <<< < >> < >> >

>>> Navegador : Mozilla Firefox v.2.0.0.8

>>> resultado visualizacion en local : OK

Perfecto. Sin ningun problema

>>> resultado visualizacion en un servidor web : ERROR

Me sale una ventana tipo "Que desea que haga firefox con este archivo?abrir o descargar ??¿? " O sea que no funciona como tendria que funcionar.

>>> >>> <<< < >> < >> >
>>> >>> <<< < >> < >> >

>>> Navegador : Microsoft IE v. 6.0.2900.2180

NOTA: necesita usar el "plugin" Adobe SVG viewer. Se puede descargar de:

http://www.adobe.com/es/svg/viewer/install/

>>> resultado visualizacion en local : OK

(Tienes que activar el componente ActiveX que es el visor SVG que tienes instalado. Le dices que si y entonces se ve)

>>> resultado visualizacion en un servidor web : ERROR

(La cagaste burt lancaster. No se visualiza ni a tiros.)

>>> >>> <<< < >> < >> >
>>> >>> <<< < >> < >> >

>>> Editor y Navegador : Amaya v. 9.55

>>> resultado visualizacion en local : OK

>>> resultado visualizacion en servidor web : OK

>>> >>> <<< < >> < >> >
>>> >>> <<< < >> < >> >

La cuestión es si me pueden decir en qué fallo. El codigo HTML esta validado aunque es psible que las sentencias que pongo no sean las correctas. Probé también con <embed src="milogo.svg"> y a parte de no funcionar tampoco es una solucion valida para W3C.

Busqué con el custom search y encontre algunos post interesantes:

(1) http://www.carto.net/papers/svg/samples/svg_html.shtml

Aqui me explica mi duda sobre incrustar los svg y corrobora lo que digo. La sentencia object que uso es correcta y la embed no cumple con el estandar. La iframe no la he probado.

(2) http://www.forosdelweb.com/f26/visualizar-svg-270061/

12/02/05, 01:29:26

Pero es que no consigo ver porque no funciona. A lo mejor es una tonteria pero no lo veo.

¿Será el servidor? Es que es raro que funcione en un sitio y en otro no. Gracias por todo de antemano.

Fuentes, derechos de autor, licencias y esas cosas:

http://www.w3c.org

http://www.adobe.com/es/

http://www.microsoft.com/en/us/default.aspx

http://www.mozilla.org

PD Perdonen si el post causa redundancia o está mal colocado.Saludos.

andresvendi2000 · #2 (**permalink**) 10/06/2008, 13:47

vieiras;

si aun no puedes incrustar imagenes, dejame decirte que el codigo que estas utilziando para incrustar el archivo SVG al html esta correcto, sin embargo;

lo que se debe de hacer es comfigurar los tipos mime en el servidor;

es decir se debe de crear el tipo mime:

sgv
image/svg+xml

con esto el servidor entendera que cuando encuentre un archivo de esa extension lo pueda abrir con el plugin necesario..

espero que no sea muy tarde..

de igual a alguien mas le servira.