html - img - object svg change color

¿Utilizo<img>,<object> o<embed> para archivos SVG? (10)

¿Debo usar <img> , <object> o <embed> para cargar archivos SVG en una página de manera similar a cargar un jpg , gif o png ?

¿Cuál es el código de cada uno para garantizar que funcione lo mejor posible? (Estoy viendo referencias a incluir el mimetype o apuntar a representadores SVG de respaldo en mi investigación y no ver una buena referencia de vanguardia).

Supongamos que estoy comprobando la compatibilidad con SVG con Modernizr y me estoy replegando (probablemente haciendo un reemplazo con una etiqueta simple <img> ) para los navegadores no compatibles con SVG.

Usar `srcset`

Hoy en día, la mayoría de los navegadores actuales admiten el atributo srcset , que permite especificar diferentes imágenes para diferentes usuarios. Por ejemplo, puede usarlo para una densidad de píxeles de 1x y 2x, y el navegador seleccionará el archivo correcto.

En este caso, si especifica un SVG en el srcset y el navegador no lo admite, retrocederá en el src .

<img src="logo.png" srcset="logo.svg" alt="My logo">

Este método tiene varios beneficios sobre otras soluciones:

No se basa en hacks o scripts extraños.
Es sencillo
Todavía puede incluir texto alternativo
Los navegadores que admiten srcset deben saber cómo manejarlo para que solo descargue el archivo que necesita.

Desde IE9 y superiores, puedes usar SVG en una etiqueta IMG ordinaria.

https://caniuse.com/svg-img

<img src="/static/image.svg">

Encontré una solución con CSS puro y sin doble descarga de imágenes. No es hermoso como quiero, pero funciona.

<!DOCTYPE html> <html> <head> <title>HTML5 SVG demo</title> <style type="text/css"> .nicolas_cage { background: url(''nicolas_cage.jpg''); width: 20px; height: 15px; } .fallback { } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <style> <![CDATA[ .fallback { background: none; background-image: none; display: none; } ]]> </style> </svg>  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"> <switch> <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" /> <foreignObject> <div class="nicolas_cage fallback"></div> </foreignObject> </switch> </svg> <hr/>  <object type="image/svg+xml" data="circle_orange.svg"> <div class="nicolas_cage fallback"></div> </object> </body> </html>

La idea es insertar SVG especial con estilo de respaldo.

Más detalles y proceso de prueba que puedes encontrar en mi blog .

La mejor opción es usar imágenes SVG en diferentes dispositivos :)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src=''your-alternative-image.png''">

Personalmente usaría una etiqueta <svg> porque si tienes control total sobre ella. Si lo usa en <img> , no podrá controlar las entrañas del SVG con CSS, etc.

Otra cosa es el soporte del navegador .

Simplemente abre tu archivo svg y pégalo directamente en la plantilla.

entonces en tu css puedes simplemente por ejemplo:

svg { fill: red; }

Algunos recursos: css-tricks.com/using-svg

Puedo recomendar el Manual de SVG (publicado por el W3C), que trata este tema: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Si usas <object> , obtienes el raster backback gratis *:

<object data="your.svg" type="image/svg+xml"> <img src="yourfallback.jpg" /> </object>

*) Bueno, no del todo gratis, ya que algunos navegadores descargan ambos recursos, consulte la sugerencia de Larry a continuación para saber cómo solucionarlo.

Actualización de 2014:

Si desea un svg no interactivo, use <img> con alternativas de script a la versión png (para IE más antiguo y android <3). Una forma limpia y simple de hacer eso:
<img src="your.svg" onerror="this.src=''your.png''"> .
Esto se comportará como una imagen GIF, y si su navegador admite animaciones declarativas (SMIL), se reproducirán.
Si desea un svg interactivo, use <iframe> o <object> .
Si necesita proporcionar a los navegadores más antiguos la posibilidad de usar un complemento svg, use <embed> .
Para svg en background-image css y propiedades similares, modernizr es una opción para cambiar a imágenes de respaldo, otra depende de múltiples fondos para hacerlo automáticamente:
div { background-image: url(fallback.png); background-image: url(your.svg), none; }
Nota : la estrategia de fondos múltiples no funciona en Android 2.3 porque admite fondos múltiples pero no svg.

Una buena lectura adicional es esta publicación de blog en svg fallbacks.

Si necesita que sus SVG sean completamente estilizables con CSS, tienen que estar en línea en el DOM. Esto se puede lograr mediante la inyección de SVG, que usa Javascript para reemplazar un elemento HTML (generalmente un elemento <img> ) con el contenido de un archivo SVG después de que la página se haya cargado.

Aquí hay un ejemplo mínimo usando SVGInject :

<html> <head> <script src="svg-inject.min.js"></script> </head> <body> <img src="image.svg" onload="SVGInject(this)" /> </body> </html>

Después de cargar la imagen, el onload="SVGInject(this) activará la inyección y el elemento <img> será reemplazado por el contenido del archivo provisto en el atributo src . Esto funciona con todos los navegadores que admiten SVG.

Descargo de responsabilidad: soy el coautor de SVGInject

Si utiliza etiquetas <img> , los navegadores basados en webkit no mostrarán imágenes de mapa de bits incrustadas .

~~Si usa SVG en línea, Explorer no cambiará el tamaño de SVG de acuerdo con su CSS.~~
Explorer cambiará el tamaño del SVG correctamente , pero debe especificar tanto el alto como el ancho.

~~Descubrí que la etiqueta <object> es la única que funciona en todos los navegadores. Tuve que cambiar el ancho y la altura (dentro de la SVG) al 100% para que se redimensionara correctamente.~~

Puede agregar onclick, onmouseover, etc. dentro del svg, a cualquier forma en el SVG: onmouseover = "top.myfunction (evt);"

También puede usar fuentes web en el SVG incluyéndolas en su hoja de estilo normal.

Nota: si está exportando SVG''s desde Illustrator, los nombres de las fuentes web serán incorrectos. Puede corregir esto en su CSS y evitar perder el tiempo en el SVG. Por ejemplo, Illustrator le da el nombre incorrecto a Arial, y puede arreglarlo así:

@font-face { font-family: ''ArialMT''; src: local(''Arial''), local(''Arial MT''), local(''Arial Regular''); font-weight: normal; font-style: normal; }

Todo esto funciona en cualquier navegador lanzado en los últimos dos años .

Resultados en ozake.com (en francés). Todo el sitio está hecho de SVG, excepto el formulario de contacto.

Advertencia: las fuentes web no se redimensionan con precisión, y si tiene muchas transiciones de texto sin formato a negrita o cursiva, puede haber una pequeña cantidad de espacio adicional o faltante en los puntos de transición. Vea mi respuesta en esta pregunta para más información.

<object> y <embed> tienen una propiedad interesante: permiten obtener una referencia al documento SVG del documento externo (teniendo en cuenta la política del mismo origen). La referencia se puede utilizar para animar el SVG, cambiar sus hojas de estilo, etc.

Dado

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

Entonces puedes hacer cosas como

document.getElementById("svg1").addEventListener("load", function() { var doc = this.getSVGDocument(); var rect = doc.querySelector("rect"); // suppose our image contains a <rect> rect.setAttribute("fill", "green"); });

Esta función jQuery captura todos los errores en imágenes svg y reemplaza la extensión del archivo con una extensión alternativa

Abra la consola para ver el error al cargar la imagen svg

(function($){ $(''img'').on(''error'', function(){ var image = $(this).attr(''src''); if ( /(/.svg)$/i.test( image )) { $(this).attr(''src'', image.replace(''.svg'', ''.png'')); } }) })(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://jsfiddle.net/img/logo.svg">

html - img - object svg change color

¿Utilizo<img>,<object> o<embed> para archivos SVG? (10)

Usar srcset

Usar `srcset`