Estoy trabajando en un diseño de respuesta y estoy pensando en la creación de iconos de navegación como .archivos svg. ¿Qué es el actual soporte de navegador como y hay una solución/plugin para navegadores anteriores versiones?

InformationsquelleAutor Jedda | 2012-01-19

10 Comentarios

  1. 35

    La especificación SVG es extensa y no hay ningún explorador admite actualmente la totalidad de las especificaciones. Lo que se dice las últimas versiones de los principales navegadores de que basic soporte de SVG. Ya que ninguno de ellos tiene el completo apoyo que usted necesita para comprobar las características individuales de cada navegador que usted está apuntando. Si solo está en el dibujo de formas básicas y no utilizar las funciones más avanzadas (como filtros, animación, etc) es probable que usted no tendrá ningún problema.

    Un completo navegador de matriz de compatibilidad se puede encontrar aquí.

    La solución para versiones antiguas de IE, es el uso de VML. Si el apoyo a IE6 es necesario y estás dibujando con el código, a continuación, Raphael.js va a hacer esta comprobación de compatibilidad para usted y procesan mediante VML o SVG cuando sea apropiado. Pero si está cargando un raw archivo SVG, y la utiliza como una fuente de la imagen que no funcionan.

    Otra opción para los navegadores antiguos es el uso de la canvg biblioteca de JavaScript. Es un puro JavaScript, SVG analizador que harán que la imagen resultante a la lona, pero esto podría ser una exageración.

  2. 12

    … o puede dejar que el servidor apache, para tratar con él:

    RewriteEngine On
    RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
    RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
    RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

    usted sólo tiene que crear .png versiones de todos .archivo svg, y no importa si el archivo css de fondo o de una etiqueta img.

  3. 9

    editado: solía enlace a un muy buen SVG tabla de comparación, pero no ha sido actualizado desde el año 2011, por lo que no es relevante más.

    • Vale la pena señalar que esta tabla se actualizó por última vez en 2011
    • No es cierto @bashaus. Esta tabla se actualiza con regularidad.
  4. 7

    La pena señalar, si usted necesita <=IE8 apoyo, usted puede implementar GoogleChromeFrame fácilmente suficiente para obtener el soporte de SVG que usted está buscando…

    Pesar de que usted podría encontrar que cada navegador tiene su propio peculiaridades con respecto a las características de la especificación. Yo he tenido problemas con la creación dinámica de los nodos que utilizar los filtros y animateMotion ha sido intervenida en Google Chrome de manera demasiado largo…(utilizamos FF5+ como nuestro interfaces interactivas por esta razón, Safari es mejor también)

    De la OMI, a menos que toda la aplicación está SVG, sólo quiero usar Png para tus iconos, a menos que usted quiere que escala muy bien! 🙂

    …pero si lo que desea es jugar con SVG, Giv er! 😉

  5. 5

    ¡Con el elemento object!

    <object data="example.svg" type="image/svg+xml">
         <!-- If browser don't soport /don't find SVG  -->
         <img src="example.png" alt="Logotype" />
    </object>
  6. 3

    Usted podría también utilizar SVGs en general para todas las imágenes. De que manera te gustaría cubrir todos retina cosas en los iDevices. Otros dispositivos de seguir tarde o temprano.

    Para los navegadores que no soportan svg, podría dar al cuerpo una clase de ‘no-svg’.

    En tu css acaba de añadir una».sin svg .yourimageclass’ y colocar un png en su lugar.(reemplazar)

    HTML5 Boilerplate da que no-svg clase ya por defecto con algunos de magia con javascript. (por ejemplo, para IE8)

  7. 3

    Si estoy trabajando con <img> elementos (como opuesto a CSS imágenes de fondo), yo uso una práctica solución, una combinación de Modernizr (una biblioteca de JavaScript que detecta la disponibilidad de ciertas características, tales como .soporte de svg, en los navegadores) y unas pocas líneas de jQuery:

    $(".no-svg img").each(function() {
        var $this = $(this);
        if ($this.attr("src").indexOf(".svg") > -1) {
            var isSvg = $this.attr("src").toString();
            var isPng = isSvg.replace(".svg", ".png");
            $this.attr("src", isPng);
        }
    });

    1) puedo crear .png versiones de todos .archivo svg.
    2) Modernizr da el elemento html en la clase de .no-svg si detecta que no hay ninguna .soporte de svg.
    3) El jQuery swaps de las extensiones de archivo. .indexOf(".svg") comprueba si la cadena ".svg" está incluido dentro del valor de src, volviendo -1 si no la encuentra y un entero positivo si lo hace. Si encuentra ".svg", todo src cadena se tira en isSvg, y .replace() swaps .svg para .png y guarda el resultado como isPng, que es, a continuación, establezca el valor de src.

    • Bueno, pero hay una razón por la que no sólo busca ‘.svg’ al final de la src URI?
    • no sólo : el bicarbonato de mi fideos con esas 2 palabras !

Dejar respuesta

Please enter your comment!
Please enter your name here