1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo usar archivos .svg en una página web?

¿Cómo usar archivos .svg en una página web?

2010-01-06 16 views

Respuesta

5

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/" />

Fuente

2010-01-06 06:30:58

+0

que esto realmente mostrar la imagen SVG en cualquier ¿navegador? Gracias? – Parastar

+0

Debería aparecer en todos los navegadores principales. –

+1

Gracias, pero, ¿de qué se trata la "página de complementos"? no puede ponerse al día con eso? – Parastar

2

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 navegadores, incluyendo IE

Fuente

2010-01-06 07:27:55

40

Ver svgweb quickstart y la svgweb project homepage por algo que funciona en todos los navegadores, incluyendo IE (requiere plugin de flash).

Hay muchas maneras 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>

Fuente

2010-01-06 08:15:54

+3

Mi favorito no está en esta lista, solo abra su svg en un editor de texto y coloque su contenido en línea en su documento html, esto le permitirá aplicarle filtros y darle un estilo a la imagen svg con css. – chrisweb

+2

@chrisweb Eso también funciona con ''. Consulte "Usar SVG como " en http://css-tricks.com/using-svg/. –

+0

@chrisweb ¿Cómo funciona eso con una imagen de fondo? –

17

Si lo único 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, 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>

El repliegue img sólo se carga y se utiliza si el navegador no entiende SVG.

Fuente

2012-10-30 04:09:32 Caspar

+0

mueve alternativamente la reserva al propio CSS – Jerome

1

Me gustaría estar de acuerdo con la respuesta de "code-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.

del W3C-escuelas:

SVG es todo soportadas en En Firefox, Internet Explorer 9, Google Chrome, Opera, y Safari se puede

<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 usarlo, también puede poner sus gráficos de 1 color en un webfont. (ver, por ejemplo, iconmoon.io)

Fuente

2013-03-06 06:52:14 Ideogram

2

Recomiendo colocar 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 este le permite utilizar css para diseñarlo, como cambiar el color de relleno o la aplicación de filtros a ella como la falta de definición. Otra ventaja es que guarda una solicitud HTTP para recuperar el archivo svg si está dentro de su documento.

Si quiere, por ejemplo, cambiar su posición usando css, entonces tiene que 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 siguientes.

Leer el SVG capítulo en línea para obtener más detalles:

si no quieres ponerlo en línea en su página, entonces la mejor alternativa parece ser el objeto etiqueta y evita usar la etiqueta de inserción.

leer esto para más detalles acerca de objeto de inserción vs vs etiqueta img:

Fuente

2013-09-23 21:00:40 chrisweb

+0

¿Conoces alguna forma de automatizar esto? En lugar de copiar desde el archivo SVG y pegar en su HTML, ¿hay algún plugin grunt o algo que pueda inyectarlo en su página? –

+0

no, lo siento, nunca he oído hablar de tal plugin, pero tal vez exista – chrisweb

2

enfoque de Caspar es el apropiado. Sin embargo, me gustaría mover el repliegue a la CSS, ya que es probable que desee 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); 
}`

Fuente

2013-12-20 13:26:58 Jerome

Cuestiones relacionadas

 Cuestiones relacionadas