Dois-je utiliser <img>, <object>, ou <embed> pour les fichiers SVG ?

Question

Dois-je utiliser <img>, <object>, ou <embed> pour les fichiers SVG ?

Demandé el 18 de Décembre, 2010: Quand la question a-t-elle été
59676 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Dois-je utiliser <img> , <object> o <embed> pour charger des fichiers SVG dans une page de manière similaire au chargement d'un fichier de type jpg , gif o png ?

Quel est le code pour chacun d'entre eux afin de s'assurer qu'il fonctionne aussi bien que possible ? (Dans le cadre de mes recherches, je vois des références à l'inclusion du mimetype ou à l'indication de générateurs de rendu SVG de secours, mais je ne vois pas de bonne référence sur l'état de l'art).

Supposons que je vérifie la prise en charge de SVG avec Modernizr et de revenir en arrière (probablement en remplaçant par une simple <img> ) pour les navigateurs non compatibles SVG.

Demandé el 18 de Décembre, 2010 par artlung

3 votes

Jetez un coup d'œil sur github.com/jonathantneal/svg4everybody

Commenté el 20 de Janvier, 2017 par Machado

2 votes

Théoriquement, vous pourriez aussi avoir un <svg> à partir duquel vous souhaitez référencer d'autres SVG. Cela peut être réalisé, par exemple, à l'aide des éléments suivants <image> .

Commenté el 29 de Septembre, 2017 par phk

1 votes

Je viens d'écrire un article de blog sur ce sujet : claude-e-e.medium.com/

Commenté el 28 de Février, 2021 par Claude

Answer 1

5 Réponses

Answer 2

5voto

Artru Points 737

J'ai trouvé une solution avec du pur CSS et sans double téléchargement d'images. Ce n'est pas aussi beau que je le voudrais, mais cela fonctionne.

<!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>

<!-- inline 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/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

L'idée est d'insérer un SVG spécial avec un style de repli.

Vous trouverez plus de détails et le processus de test dans mon blog .

Répondu el 26 de Octobre, 2014 par Artru (737 Points )

Answer 3

4voto

Mahdi Porkar Points 113

D'après mon expérience personnelle, je suggère de charger le fichier svg par src dans la balise image. Si vous avez beaucoup d'icônes svg ou si vous les ajoutez dynamiquement sur une page, cela va ralentir et nuire aux performances.

<img src="./file.svg"/> is better performance than 

<div><svg>.....</svg></div>

mais si vous voulez assigner un style css en cas de survol, vous devez utiliser l'embed.

Répondu el 30 de Juin, 2021 par Mahdi Porkar (113 Points )

Answer 4

1voto

Hidayt Rahman Points 1045

Dans la plupart des cas, je recommande d'utiliser l'option <object> pour afficher des images SVG. Cela semble un peu artificiel, mais c'est la méthode la plus fiable si vous voulez fournir des effets dynamiques.

Pour les images sans interaction, le <img> ou un arrière-plan CSS peut être utilisé.

Les SVG en ligne ou les iframes sont des options possibles pour certains projets, mais il est préférable d'éviter les <embed>

Mais si vous voulez jouer avec des trucs SVG comme

Changement de couleurs
Redimensionner le chemin
faire pivoter le svg

Choisissez celui qui est incorporé

<svg>
    <g> 
        <path> </path>
    </g>
</svg>

Répondu el 10 de Septembre, 2020 par Hidayt Rahman (1045 Points )

Answer 5

1voto

Ali Radmanesh Points 500

Meilleur moyen

L'icône de police est un excellent moyen dans les situations où vous avez beaucoup d'icônes svg.

Il existe également un excellent outil qui permet de générer une police à partir de vos icônes. application icomoon .

Des pas :

Téléchargez vos icônes svg sur icomoon.io/app
Cliquez sur l'onglet en bas à droite (Generate Font)
Placez les polices générées dans le dossier font/ de votre projet.
Ajoutez le style.css qui est sur le fichier zip à votre projet
Utilisez des icônes comme celle-ci :

<span class="icon-name"></span>

Répondu el 9 de Octobre, 2021 par Ali Radmanesh (500 Points )

Answer 6

0voto

Andres Separ Points 548

Cette fonction jQuery capture toutes les erreurs dans les images svg et remplace l'extension du fichier par une autre extension.

Veuillez ouvrir la console pour voir le erreur de chargement d'une image 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">

Répondu el 25 de Mai, 2017 par Andres Separ (548 Points )

Dois-je utiliser <img>, <object>, ou <embed> pour les fichiers SVG ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Dois-je utiliser <img>, <object>, ou <embed> pour les fichiers SVG ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: