examples - svg viewbox
SVG no aparece en Opera y Firefox, pero Chrome (5)
Bueno, encontré la razón: la incrustación directa de etiquetas svg en html aún no se admite en la mayoría de los navegadores.
Estoy tratando de mostrar esta simple svg incrustada:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_1" y="125" x="141" stroke-width="0" stroke="#000000" fill="#000000">test</text>
</g>
</svg>
</body>
</html>
Chrome lo muestra, Opera y Firefox no. ¿Hay algo que falta?
¡Gracias por tu ayuda!
Es compatible, de hecho :) Tienes dos opciones: la anterior, usando xhtml, y una nueva, usando html5 y el navegador moderno con el analizador html5:
Ejemplo de xhtml (funciona en la mayoría de los navegadores, incluido el viejo IE con el complemento de Adobe instalado):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG embedded inline in XHTML</title>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
<?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>
<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg>
</body>
</html>
Ejemplo html5 (atm soportado por IE9, FF4 y Chrome, Safari en un futuro próximo):
<!DOCTYPE html>
<html>
<head>
<title>SVG in text/html</title>
</head>
<body>
<h1>SVG in text/html</h1>
<p><svg height=86 width=90 viewBox=''5 9 90 86'' style=''float: left;''>
<path stroke=#F53F0C stroke-width=10 fill=#F5C60C stroke-linejoin=round d=''M 10,90 L 90,90 L 50,14 Z''/>
<line stroke=black stroke-width=10 stroke-linecap=round x1=50 x2=50 y1=45 y2=75 />
</svg><b>Warning:</b> Remember that ± means that there are two
solutions!</p>
</body>
</html>
Necesita un analizador HTML5 para que se muestre correctamente, por ejemplo, Firefox 4 u Opera 11.50 . Visite caniuse.com para obtener más detalles del navegador.
Puede usar XHTML con svg en línea y funcionará en todos los navegadores con capacidad svg, vea aquí un ejemplo.
Según este sitio, tienes algunas opciones. . aunque personalmente lucho con esto, también ...
"Una forma simple y fácil de incluir SVG en una página web es usar la etiqueta de objeto XHTML. Aquí hay un ejemplo:"
<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG Included with <object> tag in an XHTML File</title>
</head>
<body> <h1>An SVG rectangle (via <object> tag)</h1>
<object type="image/svg+xml" data="web_square.svg">
Browser does not support SVG files!
</object>
</body>
</html>
"Inclusión del archivo SVG." Image / svg + xml "es el tipo MIME del archivo incluido. Debe darse". "Texto que se mostrará si un navegador no es compatible con SVG. Los navegadores deben ignorar las etiquetas que no entienden y exponer el texto".
Él alos describe un método "Uso de espacios de nombre" ....
"A través de Name Spaces, un archivo SVG se puede colocar directamente en un archivo XHTML. Aquí hay un ejemplo de un archivo XHTML muy simple que muestra un cuadrado azul. El cuadro se dibujó con Inkscape. (Para mayor claridad, el dibujo de Inkscape se guardó como un archivo SVG simple y algunos de los atributos de rectángulo no utilizados fueron eliminados.) "
<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>SVG Embedded into an XHTML File</title>
</head>
<body> <h1>An SVG rectangle (via Name spaces)</h1>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="150"
height="150"
id="svg1341">
<defs id="defs1343" />
<g id="layer1">
<rect
width="90" height="90"
x="30" y="30"
style="fill:#0000ff;
fill-opacity:0.75;
stroke:#000000 stroke-width:1px"
id="rect1353" />
</g>
</svg>
</body>
</html>
Buena suerte ... ser SVG no es fácil ...
Ciertamente, con Firefox hay un bloque de seguridad. Esto es fácil de obtener si está usando PHP. Simplemente incluye tu imagen.
Mucho más fácil.
<?php include "myimage.svg" ?>