<object> i <embed> mają interesującą właściwość: umożliwiają uzyskanie odniesienia do dokumentu SVG z dokumentu zewnętrznego (biorąc pod uwagę politykę tego samego pochodzenia). Odniesienie może być następnie użyte do animowania SVG, zmiany arkuszy stylów itp.

Podane

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

Możesz wtedy robić takie rzeczy jak

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});

Od IE9 i wyżej Można używać SVG w zwykłym znaczniku IMG..

Https://caniuse.com/svg-img

<img src="/static/image.svg">

Najlepszą opcją jest używanie obrazów SVG na różnych urządzeniach:)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

Jeśli używasz znaczników , to przeglądarki oparte na webkitach nie będą wyświetlać osadzonych bitmapowych obrazów.

Jeśli używasz plików SVG inline, to Explorer nie zmieni rozmiaru pliku SVG zgodnie z Twoim CSS.
Explorer poprawnie zmieni Rozmiar pliku SVG, ale musisz podać zarówno wysokość, jak i szerokość.

odkryłem, że tag

Możesz dodać onclick, onmouseover itp. wewnątrz svg, do dowolnego kształtu w SVG: onmouseover= " top.mojafunkcja (evt); "

Możesz również użyć czcionek internetowych w SVG, umieszczając je w zwykłym arkuszu stylów.

Uwaga: jeśli eksportujesz pliki SVG z programu Illustrator, nazwy czcionek internetowych będą błędne. możesz to poprawić w CSS i uniknąć bałaganu w SVG. Na przykład: program Illustrator podaje złą nazwę Arial i można to naprawić w następujący sposób:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

Wszystko to działa na każdej przeglądarce wydanej w ciągu ostatnich dwóch lat .

Wyniki na ozake.com (w języku francuskim). cała strona jest wykonana z plików SVG z wyjątkiem formularza kontaktowego.

Ostrzeżenie: czcionki internetowe nie są dokładnie zmieniane, a jeśli masz wiele przejść z zwykłego tekstu na pogrubiony lub kursywę, może być niewielka ilość dodatkowego lub brakującego miejsca na punkty przejściowe. Zobacz moją odpowiedź na to pytanie aby uzyskać więcej informacji.

Użyj srcset

Większość obecnych przeglądarek obsługuje atrybut srcset , który umożliwia określanie różnych obrazów dla różnych użytkowników. Na przykład możesz użyć go dla gęstości pikseli 1x i 2x, a przeglądarka wybierze odpowiedni plik.

W tym przypadku, jeśli podasz plik SVG w srcset, A przeglądarka go nie obsługuje, zostanie on wycofany na src.

<img src="logo.png" srcset="logo.svg" alt="My logo">

Metoda ta ma kilka zalet w stosunku do innych rozwiązań:

1. nie polega na na wszelkie dziwne hacki lub skrypty
2. it ' s simple
3. nadal możesz dołączyć tekst alt
4. przeglądarki obsługujące srcset powinny wiedzieć, jak sobie z tym poradzić, aby pobierały tylko potrzebny plik.

Osobiście użyłbym znacznika <svg>, ponieważ jeśli masz nad nim pełną kontrolę. Jeśli używasz go w <img>, nie kontrolujesz wnętrzności SVG za pomocą CSS itp.

Kolejną rzeczą jest Obsługa przeglądarki .

Wystarczy otworzyć plik svg i wkleić go prosto do szablonu.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

Wtedy w css możesz po prostu np:

svg {
  fill: red;
}

Niektóre zasoby: wskazówki SVG

Jeśli chcesz, aby Twoje pliki SVG były w pełni styleable z CSS, muszą być wbudowane w DOM. Można to osiągnąć poprzez wstrzyknięcie SVG, które wykorzystuje Javascript do zastąpienia elementu HTML (Zwykle elementu <img>) zawartością pliku SVG po załadowaniu strony.

Oto minimalny przykład użycia SVGInject :

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

Po załadowaniu obrazu onload="SVGInject(this) uruchomi zastrzyk, a element <img> zostanie zastąpiony zawartością pliku podanego w atrybut src. Działa to we wszystkich przeglądarkach obsługujących SVG.

Uwaga: jestem współautorem SVGInject

Znalazłem jedno rozwiązanie z czystym CSS i bez podwójnego pobierania obrazów. Nie jest piękny, jak chcę, ale działa.

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

Chodzi o to, aby wstawić specjalny SVG ze stylem awaryjnym.

Więcej SZCZEGÓŁÓW I proces testowania można znaleźć w mój blog .

Ta funkcja jQuery przechwytuje wszystkie błędy w obrazach svg i zastępuje rozszerzenie pliku alternatywnym rozszerzeniem

otwórz konsolę, aby zobaczyć błąd wczytywania obrazu 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">