image - insertar - ¿Cómo usar archivos.svg en una página web?
usar svg en html5 (7)
Consulte svgweb quickstart y la página de inicio del proyecto svgweb para ver algo que funciona en todos los navegadores, incluido IE (requiere el complemento Flash).
Hay muchas formas de incluir un archivo svg existente:
<img src="your.svg"/>-
<object data="your.svg"/> -
<iframe src="your.svg"/> -
<embed src="your.svg"/> -
<div style="background:url(your.svg)">...</div>
Quiero saber cómo se puede usar un archivo .svg en una página web.
El enfoque de Caspar es el correcto. Sin embargo, movería la alternativa al CSS, ya que probablemente quiera aplicar algunos estilos al archivo svg en sí ...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
Me gustaría aceptar la respuesta de "código-zoop". Aunque esto técnicamente no responde a su pregunta, también podría ser una solución: ingrese los datos relevantes directamente en el HTML. O directamente como un elemento svg, o usando Raphaël-JS.
Desde w3c-schools:
SVG está respaldado en Firefox, Internet Explorer 9, Google Chrome, Opera y Safari.
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
(fin de la cita)
Y para pensar aún más fuera de la caja, dependiendo de cómo quiera usarla, también puede poner sus gráficos de 1 color en una fuente web . (ver por ejemplo iconmoon.io)
Recomiendo poner el svg en línea en su documento (técnica html5). Simplemente abra su archivo SVG, copie la etiqueta SVG y todo lo que contiene y luego péguelo en su documento html.
<html>
<body>
<svg></svg>
</body>
</html>
Tiene la ventaja de que esto le permite usar css para darle un estilo, como cambiar el color de relleno o aplicarle filtros como desenfoque. Otra ventaja es que guarda una solicitud HTTP para recuperar el archivo svg si está dentro de su documento.
Si quieres, por ejemplo, cambiar su posición usando css, entonces debes poner el CSS dentro de un atributo de estilo. Los estilos que se encuentran en un archivo css externo no se aplicarán en la mayoría de los navegadores, ya que esta es una restricción de seguridad. Por ejemplo:
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
Esta técnica es compatible con todos los navegadores, excepto IE8 y abajo, así como con el navegador android 2.3 y más abajo.
Lea el capítulo SVG en línea para más detalles:
Si no desea ponerlo en línea en su página, entonces la mejor alternativa parece ser la etiqueta de objeto y evitar el uso de la etiqueta de inserción.
Lee esto para obtener más detalles sobre la etiqueta object vs embed vs img:
Si todo lo que desea hacer es colocar una imagen SVG, como un logotipo o diagrama estático, solo debe tener cuidado para proporcionar una alternativa para las versiones anteriores de Internet Explorer (es decir, las versiones 8 y anteriores).
El mejor y más simple método que he encontrado es usar un .png o .jpg para su respaldo, colocado usando una etiqueta img normal. A continuación, ajusta la etiqueta img en una etiqueta de objeto, utilizando el atributo de datos para colocar el SVG.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
La img fallback solo se carga y usa si el navegador no comprende SVG.
http://www.w3schools.com/svg/svg_inhtml.asp
El mejor ejemplo:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Raphaël-JavaScript Library . ¡Una buena biblioteca de JavaScript que usa svg y te ofrece una amplia gama de efectos!
También es compatible con la mayoría de los navegadores, incluido IE