web-dev-qa-db-fra.com

SVG dans les arrière-plans CSS

Modifier:

Comment détecter en php si le navigateur client est capable d'afficher SVG en tant qu'arrière-plan CSS?

J'ai renommé ma feuille de style de .css à .css.php. Je peux donc inclure au début:

<?php
header("content-type: text/css");
?>

et quelque part au milieu

<?php
 if (stristr($_SERVER["HTTP_ACCEPT"], "image/xml+svg"))
 {
 }
 else
 {
 }
?>

Malheureusement, mon client firefox n'envoie pas de chaîne image/xml+svg au serveur. Alors, comment puis-je détecter si un navigateur est capable d’afficher SVG en tant que fond CSS dans php?

Réf.: http://www.gabis-bloghaeuschen.de/2006/03/27/php-code-in-der-css-datei/

Terminez la modification.

J'ai expérimenté (à l'exception du dernier navigateur Web le plus récent), aucun autre navigateur Web n'est capable d'afficher une image .svg à partir d'un fichier .css à l'aide de url ().

En utilisant la balise embed et son attribut pluginspage, il est possible de renvoyer un client à un plugin manquant:

<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.Adobe.com/svg/viewer/install/" />

Étant donné que le plug-in Adobe est obsolète, vous pouvez également vous référer au visualiseur corel svg.

Quelle est la meilleure stratégie pour gérer les anciens navigateurs? Existe-t-il un mécanisme permettant de les renvoyer à un plugin si l'image .svg est incluse à partir d'un fichier .css?

modifier:

#header {
 width: 760px;
 height: 288px;
 margin: 0 auto;
 background: url(images/background.svg) no-repeat right top;
}

Comment faire référence à des navigateurs, ne pouvant pas gérer le code ci-dessus, au moins à une aide tierce, par ex. un plugin? (Ou peut-être un .png - mais en réalité, ce n'est pas ce que je veux.)

Quelles autres possibilités existe-t-il pour traiter avec les navigateurs qui ne peuvent pas gérer svg dans les feuilles de style?

Iceweasel peut afficher background.svg directement mais ne peut pas afficher l'image si elle est incluse par style - si bien qu'il est capable de gérer svg, mais pas à partir d'une feuille de style?

Avec les coups de navigateur, je me suis rendu compte que la plupart des navigateurs n’affichaient pas l’image dans la feuille de style car elle figurait dans Scalable Vector Graphics AND dans la feuille de style. La question est donc de savoir quelle est la meilleure stratégie pour atteindre autant de téléspectateurs que possible avec le svg et utiliser les images raster en cas d'urgence uniquement.

Réf.: http://tutorials.jenkov.com/svg/displaying-svg-in-web-browsers.html

cssimagespluginreferrersvg
5
panny

Les arrière-plans sont censés être des arrière-plans. Ils ne sont pas destinés à soutenir l'interaction.

Vos options sembleraient être:

1. Faites-le en HTML plutôt qu'en CSS.

2. Demandez à votre serveur de renvoyer un contenu différent en fonction de la chaîne User-Agent.

3. Si votre fichier SVG est rectangulaire et opaque, vous pouvez effectuer des replis en tant que

background-image: url(fallback.png);
background-image: none, url(real.svg), url(fallback.png);

4. Oubliez Firefox pre-v4 et IE pre-v9. ( ref )

5. Utilisez Modernizr et utilisez inlinesvg en tant que proxy pour la prise en charge des arrière-plans SVG. (Remarque: cela ne nécessite pas deux versions du site: juste une dépendance JS et une ligne supplémentaire de CSS).

6. Il pourrait y avoir une approche utilisant JavaScript pour fournir une solution de secours plus complexe.

4
Peter Taylor