<object> e <embed> têm uma propriedade interessante: permitem obter uma referência ao documento SVG do documento externo (tendo em conta a mesma política de origem). A referência pode então ser usada para animar o SVG, mudar suas folhas de estilo, etc.

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

Depois podes fazer coisas como

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");
});

A partir do IE9 e acima pode utilizar SVG numa etiqueta IMG normal..

Https://caniuse.com/svg-img

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

A melhor opção é usar imagens SVG em diferentes dispositivos:)

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

Se usar as marcas , então os navegadores baseados no webkit não irão mostrar as imagens embutidas em bits .

Se você usar SVG em linha, então O Explorer não irá redimensionar o SVG de acordo com o seu CSS.
O Explorer irá dimensionar o SVG correctamente, mas terá de indicar tanto a altura como a largura.

descobri que a etiqueta

Pode adicionar o Click, o onmouseover, etc. dentro da svg, para qualquer forma na SVG: onmouseover = " top.myfunction (evt); "

Também pode usar os tipos de letra web na SVG, incluindo-os na sua folha de estilo regular.

Nota: Se estiver a exportar SVG do Illustrator, os nomes dos tipos de letra da web estarão errados.Podes corrigir isto no teu CSS e evitar brincar no SVG. Para exemplo, ilustrador dá o nome errado a Arial, e você pode corrigi-lo assim:

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

Tudo isto funciona em qualquer navegador lançado nos últimos dois anos.

Resultados em ozake.com (em francês). Todo o site é feito de SVG, excepto o formulário de contacto.

atenção: os tipos de letra Web não são dimensionados com precisão, e se tiver muitas transições de texto simples para negrito ou itálico, poderá haver uma pequena quantidade de espaço extra ou em falta em os pontos de transição. Veja a minha resposta em esta pergunta para mais informações.

Utilizar srcset

A maioria dos navegadores actuais suportam hoje o atributo srcset , o que permite especificar diferentes imagens para diferentes utilizadores. Por exemplo, você pode usá-lo para densidade de pixels 1x e 2x, e o navegador irá selecionar o arquivo correto.

Neste caso, se indicar um SVG no srcset e o navegador não o suportar, ele irá recuar no src.

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

Este método tem vários benefícios em relação a outras soluções:

Não é. confiando em qualquer hacks ou scripts estranhos É simples.
1. Ainda pode incluir o texto alt
2. os navegadores que suportam srcset devem saber como lidar com ele para que ele só transfere o ficheiro de que necessita.

Eu pessoalmente usaria uma etiqueta {[[2]} porque, se o fizer, tem controlo total sobre ela. Se o usar em <img> não consegue controlar as entranhas do SVG com CSS, etc.

Outra coisa é Suporte ao navegador .

Abra o seu ficheiro svg e cole-o directamente no modelo.

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

Então no seu css você pode simplesmente eg:

svg {
  fill: red;
}

Algum recurso: Dicas de SVG

Se precisares que os teus SVGs sejam completamente estileáveis com CSS, eles têm de estar alinhados no DOM. Isto pode ser conseguido através de SVG injection, que usa Javascript para substituir um elemento HTML (normalmente um elemento <img>) com o conteúdo de um ficheiro SVG após a Página ter carregado.

Aqui está um exemplo mínimo usando SVGInject:

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

Depois de carregar a imagem, o {[2] } irá desencadear a injecção e o elemento <img> será substituído pelo conteúdo do ficheiro fornecido no atributo src. Isto funciona com todos os navegadores que suportam SVG.

Disclaimer: eu sou o co-autor do SVGInject

Encontrei uma solução com CSS puro e sem download de imagens duplas. Não é bonito como eu quero, mas funciona.

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

A ideia é inserir SVG especial com estilo de recurso.

Mais detalhes e processo de teste que você pode encontrar em meu blog .

Esta função jQuery captura todos os erros em imagens svg e substitui a extensão de arquivo com uma extensão alternativa

por favor, abra a consola para ver o erro ao carregar a imagem 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">