Verwende ich <img>, <object> oder <embed> für SVG-Dateien?

Question

Sollte ich , ` oder verwenden, um SVG-Dateien auf eine Seite zu laden, ähnlich wie das Laden einerjpg,gifoderpng`?

Was ist der Code für jede Option, um sicherzustellen, dass es so gut wie möglich funktioniert? (Ich sehe Verweise darauf, dass der MIME-Typ eingebunden werden muss oder auf Fallback SVG-Renderer in meiner Recherche und finde keine gute Referenz zum Stand der Technik).

Anzunehmen ist, dass ich die SVG-Unterstützung mit Modernizr überprüfe und für nicht SVG-fähige Browser fallback (wahrscheinlich durch einen Ersatz mit einem einfachen -Tag) mache.``

Answer 1

Auch wenn w3schools das Tag nicht empfiehlt, war es das Einzige, das mein SVG mit gemusterten und maskierten Elementen im Chrome zum Laufen brachte:

Während Firefox mit folgendem Code zufrieden war:

Chrome hat den Farbverlauf nicht gerendert:

    digicraft punchcard logo

Dasselbe Ergebnis gab es mit `und in beiden Browsern.

`

Answer 2

Ich habe eine Lösung mit reinem CSS und ohne doppeltes Bild-Downloading gefunden. Es ist nicht so schön, wie ich es möchte, aber es funktioniert.

    HTML5 SVG Demo

     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }

        .fallback { background: none; background-image: none; display: none; }

Die Idee ist, ein spezielles SVG mit Fallback-Stil einzufügen.

Weitere Details und den Testprozess finden Sie in meinem Blog.

Answer 3

Basierend auf persönlicher Erfahrung schlage ich vor, die SVG-Datei durch src im Bildtag zu laden, da es, wenn Sie viele SVG-Symbole haben oder dynamisch auf einer Seite anhängen, langsamer und leistungsstärker ist

 ist eine bessere Leistung als 

.....

aber wenn Sie CSS-Stile im Hover zuweisen möchten, müssen Sie embed verwenden

Answer 4

In den meisten Fällen empfehle ich die Verwendung des `-Tags, um SVG-Bilder anzuzeigen. Es fühlt sich ein wenig unnatürlich an, aber es ist die zuverlässigste Methode, wenn Sie dynamische Effekte bereitstellen möchten.

Für Bilder ohne Interaktion kann der -Tag oder ein CSS-Hintergrund verwendet werden.

Inline-SVGs oder iframes sind mögliche Optionen für einige Projekte, aber es ist am besten, zu vermeiden.

Aber wenn Sie mit SVG-Dingen wie

• Farben ändern
• Pfade skalieren
• SVG drehen

gehen Sie mit dem eingebetteten`

Answer 5

Diese jQuery-Funktion erfasst alle Fehler in SVG-Bildern und ersetzt die Dateierweiterung durch eine alternative Erweiterung.

Bitte öffnen Sie die Konsole, um den Fehler beim Laden des Bildes svg zu sehen.

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