asp.net - icon - svg tutorials

SVG para imágenes en buscadores con respaldo PNG

Question

Estoy buscando usar versiones SVG del logotipo de una empresa en un sitio web. En la actualidad, todas las versiones actuales de los principales navegadores (IE, Safari, Chrome, Firefox, Opera) son compatibles con SVG, por lo que no parece una locura. Sin embargo, los navegadores antiguos todavía están por ahí, así que tengo que volver al soporte de PNG.

La solución obvia es colocar el contenido SVG en una etiqueta de object como tal (perdonar los estilos en línea ...):

<object data=''logo.svg'' style=''height:3em'' >
    <img src=''logo.png'' style=''height:3em'' />
</object>

Que en teoría debería representar el object si es posible, o bien representar el img . Sin embargo, a Chrome no le gusta esto y aplica el estilo de height al objeto en sí, pero no al SVG, así que termino con un pequeño cuadro tipo iframe con barras de desplazamiento, que muestra un gran logotipo.

Otra solución sería usar PNG como la fuente img , y luego cambiarla en tiempo de renderizado con la fuente SVG con javascript, si creo que estoy ejecutando en un navegador compatible con SVG. Esto no es ideal porque el PNG aún se descargará, y no confío en que pueda detectar adecuadamente el soporte de SVG. Lamentablemente, jQuery no parece tener una función de detección de SVG.

Finalmente, dado que mi sitio web está implementado con ASP.NET, podría inspeccionar la cadena de agente de usuario antes de publicar la página y especificar la fuente de img dependiendo de si creo que admitirá SVG. Pero esto también tiene el problema potencial de que no soy de confianza y puedo hacer la llamada correcta.

¿Cuál es la forma preferida de hacer SVG para imágenes?

Answer 1

El mejor método que he encontrado, incluido SVG como elemento HTML (con retorno) es este:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" style="width: 100px; height: 100px; vertical-align: top;">
    <image xlink:href="image.svg" src="fallback.png" width="100%" height="100%"/>
</svg> 

Pros:

• Proporciona respaldo en cada dispositivo / navegador que he probado (IE6-IE11, Android 2.0+, IOS3-7)
• Solo se carga una imagen para cada navegador probado (excepto IE9-IE11)
• Las imágenes cargadas externamente permiten almacenar la imagen

Contras:

• No se puede usar como imagen escalable (sensible) en IE9-IE11 ( ver esta pregunta)
• IE9-IE11 carga ambas imágenes
• IOS3-4 (Mobile Safari) tiene soporte SVG pero muestra el PNG (ya que carece de soporte SVG en línea)
• El archivo SVG no debe tener atributos de altura / ancho (no está seguro de esto, pero lo he leído en alguna parte y en mis pruebas mi SVG no los tenía de todos modos)
• No valida

Proporcione comentarios con pros / contra adicionales que pueda pensar. Sé que por un SVG puede aparecer pixelado en algunos navegadores, pero no pude probar el acercamiento desde el uso del navegador para la emulación.

Fuente: http://lynn.ru/examples/svg/en.html

Answer 2

Esta es una vieja pregunta, pero aquí hay otra solución:

1. Descargue una versión de Modernizr que se reduce a solo probar SVG (suponiendo que esa sea la única prueba que necesita).

2. Ejecute la prueba. Si pasa, ingrese el SVG. Si falla, ingrese el mapa de bits. Esencialmente:

   if (!Modernizr.svg) { 
       $("#logo").css("background-image", "url(fallback.png)"); 
   }

SVG es un caso de uso perfecto para Modernizr , ya que no existe una forma sencilla de proporcionar una alternativa.

Nota: El navegador no carga las dos versiones (png y svg).

Para el registro: la única razón por la que necesitaría un respaldo para SVG estos días si tiene que soportar IE 8 y versiones anteriores, o Android anterior.

Answer 3

Lo único que necesitas es CSS. Primero declaras la imagen alternativa como una background-image . Luego puedes usar múltiples fondos para agregar el SVG.

IE8 e inferiores ignorarán la segunda declaración de background-image fondo, ya que falta soporte de múltiples fondos.

Por cierto, estoy usando el elemento img aquí, porque un logotipo es contenido, no diseño. Usar imágenes de fondo puede parecer incorrecto en este contexto, pero no estoy de acuerdo. Obtienes lo mejor de los mundos: logotipo SVG, respaldo para

HTML:

<a href="/" class="site-logo">
    <!-- base64 encoded 1x1 px big transparent gif -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="company logo">
</a>

CSS (usando múltiples imágenes de fondo):

caniuse: múltiples fondos

• PNG para IE <9, FF <3.6, Opera <10.5
• SVG para todos los demás que soportan SVG
• Android 2.x no tendrá un PNG o SVG, ya que estas versiones realmente admiten varios fondos, pero no SVG
• Solo se realiza una solicitud HTTP para los navegadores compatibles con SVG

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    /* Fallback for <IE9 */
    background-image: url(logo.png);

    /* multiple backgrounds are ignored by <IE9 */
    background-image: url(logo.svg), none;
}

CSS (usando degradados lineales):

caniuse: gradientes de CSS

• PNG para IE <10, FF <3.6, Safari <4.0, Opera <11.1, Opera Mini, Opera Mobile <11.1
• SVG para todos los demás que soportan SVG (si se especifican los prefijos de proveedor)
• Ignorar la sintaxis del degradado antiguo para webkit hace que Android 2.x use la reserva de PNG

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    background: transparent url(logo.png) center center no-repeat;
    background-image: -webkit-linear-gradient(transparent, transparent), url(logo.svg);
    background-image:         linear-gradient(transparent, transparent), url(logo.svg);
}

Answer 4

No lo llamaría de la manera preferida, pero si quieres seguir con tu segunda opción, esto debería detectar el soporte de SVG (de Raphaël 1.5.2 ):

if(window.SVGAngle || 
    document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") {
    // supports SVG
else {
    // no SVG
}

Raphaël usa esto para determinar si debe renderizar usando VML (IE) o SVG (todos los demás).

Por curiosidad, ¿por qué SVG para tu logotipo? Si ya tiene una versión PNG, esto parece mucho trabajo.

Answer 5

Para resolver su problema con el cambio de tamaño SVG en la etiqueta de objeto:

Agregue los atributos "preserveAspectRatio" y "viewBox" a la etiqueta svg. Abra el archivo en un editor de texto y encuentre la etiqueta. en esa etiqueta, agregue los siguientes atributos:

preserveAspectRatio="xMinYMin meet" viewBox="0 0 {width} {height}"

Reemplace {ancho} y {alto} con algunos valores predeterminados para viewBox. Utilizo los valores de los atributos "ancho" y "alto" de la etiqueta SVG. Guarde el SVG y ahora debería escalar como se esperaba.

Ver: ¿Cómo escalo un obstinado SVG incrustado con la etiqueta <object>?

Sin embargo, el problema con los SVG en la etiqueta de objeto es que se tragan los clics.

SVG como fondo-imagen w / PNG de reserva: http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

Mi favorito es usar la etiqueta img y un controlador onerror para cambiar la etiqueta src a PNG.

Otro buen recurso: http://www.schepers.cc/svg/blendups/embedding.html

Answer 6

Pruebe svg-web que tienen una serie de formas diferentes de mostrar imágenes svg incluyendo flash con respaldo automático.