Estou tendo problemas com o google chrome, não renderizando svg com uma tag img. Isso acontece ao atualizar a página e ao carregar a página inicial. Posso fazer com que a imagem apareça "Inspecionando Elemento", clicando com o botão direito do mouse no arquivo SVG e abrindo o arquivo SVG em uma nova guia. A imagem SVG será então renderizada na página original.
<img src="../images/Aged-Brass.svg">
Totalmente perdido aqui quanto ao problema. A imagem svg funciona bem no IE9 e FF, mas não no Chrome ou Safari.
Eu tenho meus tipos MIME definidos também. (imagem / svg + xml)
EDIT: Aqui está uma página html simples que criei para ajudar a ilustrar meu problema.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Como você pode ver, estou tentando usar um arquivo svg em uma tag img e em css como imagem de fundo. Nenhum trabalho no carregamento da página inicial no Chrome ou Safari. Quando eu inspeciono o elemento, clique com o botão direito em svg ou clique no link para svg load em outra janela, o arquivo svg será renderizado na guia original.
fonte
Respostas:
Uma maneira simples e fácil; de acordo com https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Você deve abrir o arquivo .SVG com um editor de texto (como o bloco de notas) e alterar
xlink:href="data:img/png;base64,para:
xlink:href="data:image/png;base64,funcionou para mim!
fonte
A tag svg precisa do atributo de namespace xmlns:
<svg xmlns="http://www.w3.org/2000/svg"></svg>fonte
vim aqui porque tive o mesmo problema, quando inspeciono o elemento consigo ver o arquivo, mas no site não consigo (mesmo usando localhost)
a resposta para o meu problema era salvar o arquivo SVG. Se você salvou do ilustrador, clique em 'incorporar' e não em 'link'. como link irá apenas referir-se aos seus arquivos locais em vez de incluir os dados (se bem entendi).
Eu li sobre isso no site da adobe, que tem algumas outras dicas úteis para exportar http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Isso funcionou para mim, espero que tenha sido útil.
fonte
Vim aqui porque tive um problema parecido, a imagem não estava sendo renderizada. O que descobri foi que o cabeçalho do tipo de conteúdo do meu servidor de teste não estava correto. Eu corrigi-lo adicionando o seguinte ao meu arquivo .htaccess:
fonte
image/svgoferece o arquivo para download, ele tem que ter+xml.Em
<object>vez disso, use (é claro, substitua cada URL pelo seu):.BackgroundImage { background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top; width: 400px; height: 600px; }<!DOCTYPE html> <html> <head> <title>SVG Test</title> </head> <body> <div id="ObjectTag"> <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600"> Your browser does not support SVG. </object> </div> <div class="BackgroundImage"></div> </body> </html>fonte
Adicionar o atributo de largura à tag [svg] (editando o XML de origem svg) funcionou para mim: por exemplo:
<!-- This didn't render --> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> ... </svg> <!-- This did --> <svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg"> ... </svg>fonte
Consegui usar seu exemplo para criar uma página de teste e funcionou muito bem. Minha suposição é que há algo errado com seu arquivo SVG. Você pode colar isso aqui também? Aqui está o exemplo que usei.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/> </g> </svg>fonte
parece um bug do Chrome, fiz outra coisa, pois quase fiquei louco por causa disso ... usando o depurador Chrom se você alterar o css do objeto svg que ele mostra na tela.
então o que fiz foi: 1. verificar o tamanho da tela 2. ouvir o evento "load" do meu objeto SVG 3. quando o elemento é carregado, eu mudo seu css usando jQuery 4. ele funcionou para mim
if (jQuery(window).width() < 769) { jQuery('object#mysvg-logo')[0].addEventListener('load', function() { jQuery("object#mysvg-logo").css('width','181px'); }, true); }width: 180px;<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>fonte
Tive um problema semelhante e as respostas existentes para isso não eram aplicáveis ou funcionavam, mas não podíamos usá-las por outros motivos. Então, eu tive que descobrir o que o Chrome não gostava em nossos SVGs.
No nosso caso, acabou sendo que o
idatributo dasymboltag no arquivo SVG tinha um:, o que o Chrome não gostou. Assim que removi o:, funcionou bem.Ruim:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72"> <defs> <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt"> ... </symbol> </defs> <use .... xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt" /> </svg>Boa:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72"> <defs> <symbol id="NoMoreColon"> ... </symbol> </defs> <use .... xlink:href="#NoMoreColon" /> </svg>fonte
.svga imagem não tem altura e largura iniciais. Portanto, não é visível. Você tem que configurá-lo.Você pode fazer in-line ou em arquivo css:
Na linha:
<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">Arquivo css:
<img src="../images/Aged-Brass.svg" class="image" alt="logo">.image { width: 100px; height: 50px; }fonte
No meu caso, esse problema persistiu quando criei e salvei o svg usando o Photoshop. O que ajudou foi abrir o arquivo no Illustrator e depois exportar o svg.
fonte
Exportei meu svg do Photoshop CC inicialmente e tive que adicionar manualmente
version="1.1"na<svg>etiquetapara exibi-lo no Chrome.
fonte
O tipo de conteúdo no cabeçalho HTTP do servidor era o problema para mim. Eu tenho um servidor node.js, adicionado:
if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) { res.writeHead(200, { "Content-Type": "image/svg+xml" }); }pageName é minha variável local para o que é solicitado.
Meu palpite é que esse é um problema comum! Estou usando a versão atual do Chrome (março de 2020).
fonte
Para mim, definir largura / altura para o img funcionou.
<asp:Image runat="server" ID="Icon" Style="max-width: 50px; max-height: 50px; position: relative;" />fonte
Tive o mesmo problema. Se o servidor está configurado corretamente e .htacces não é a resposta, você pode querer olhar a fonte svg que você está incorporando. Os meus foram criados com editor de texto, renderizados bem no Chrome e Safari dentro do código html5, uma vez embutido, nada ficava visível. Adicionada versão correta, dimensões etc. ao código SVG e funciona perfeitamente. Além disso, todos os estilos embutidos.
Ie
<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;" /> </svg>fonte
Eu também tive o mesmo problema com o cromo, depois de adicioná-
DOCTYPElo funciona como esperado<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">Antes
<?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve"> <g fill="none" stroke="black" stroke-width="15"> ...... ...... ....... </g> </svg>Depois de
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve"> <g fill="none" stroke="black" stroke-width="15"> ...... ...... ....... </g> </svg>fonte
Tenha cuidado para não ter propriedade css de transição para imagens SVG
Não sei o porquê, mas se você fizer: "transição: todas as facilidades 0.3s" para a imagem SVG no Chrome, as imagens não aparecem
por exemplo:
* { transition: all ease 0.3s }Chrome não renderiza SVG.
Remova qualquer propriedade css de transição e tente novamente
fonte
Em caso de problemas, tente abrir as imagens primeiro com um programa capaz de ler imagens svg.
Se isso falhar, a imagem svg está de alguma forma corrompida.
Eu tive esse caso e copiei os caminhos-svg em uma nova imagem-svg e ajustei todos os detalhes das tags-svg.
Nunca testei o motivo de não ser renderizado, mas suponho que alguns sinais especiais invisíveis causaram o erro de renderização. Às vezes, obtive arquivos editados no Mac. Já tive esse problema em outro contexto.
fonte
Eu estava tendo o mesmo problema com uma imagem SVG incluída por meio da tag IMG. Descobri que o Chrome não gostava que houvesse uma linha em branco diretamente no topo do arquivo.
Removi a linha em branco e meu SVG imediatamente começou a renderizar.
fonte
Certifico-me de adicionar o estilo da imagem . Funcionou para mim
style= "width:320; height:240"fonte
Just replace <img> tag to <object> tag for SVG image. <object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>fonte
Lighttpd
Meu problema era que estava faltando um manipulador de mime para
svgarquivos no arquivo de configuração lighttpd. Adicioná-los ao seulighttpd.confpode resolver seu problema:mimetype.assign = ( ".pdf" => "application/pdf", ".sig" => "application/pgp-signature", ".spl" => "application/futuresplash", ".class" => "application/octet-stream", ".ps" => "application/postscript", ".torrent" => "application/x-bittorrent", ".dvi" => "application/x-dvi", ".gz" => "application/x-gzip", ".pac" => "application/x-ns-proxy-autoconfig", ".swf" => "application/x-shockwave-flash", ".tar.gz" => "application/x-tgz", ".tgz" => "application/x-tgz", ".tar" => "application/x-tar", ".zip" => "application/zip", ".mp3" => "audio/mpeg", ".m3u" => "audio/x-mpegurl", ".wma" => "audio/x-ms-wma", ".wax" => "audio/x-ms-wax", ".ogg" => "application/ogg", ".wav" => "audio/x-wav", ".gif" => "image/gif", ".jpg" => "image/jpeg", ".jpeg" => "image/jpeg", ".png" => "image/png", ".svg" => "image/svg+xml", ".xbm" => "image/x-xbitmap", ".xpm" => "image/x-xpixmap", ".xwd" => "image/x-xwindowdump", ".css" => "text/css", ".html" => "text/html", ".htm" => "text/html", ".js" => "text/javascript", ".asc" => "text/plain", ".c" => "text/plain", ".cpp" => "text/plain", ".log" => "text/plain", ".conf" => "text/plain", ".text" => "text/plain", ".txt" => "text/plain", ".spec" => "text/plain", ".dtd" => "text/xml", ".xml" => "text/xml", ".mpeg" => "video/mpeg", ".mpg" => "video/mpeg", ".mov" => "video/quicktime", ".qt" => "video/quicktime", ".avi" => "video/x-msvideo", ".asf" => "video/x-ms-asf", ".asx" => "video/x-ms-asf", ".wmv" => "video/x-ms-wmv", ".bz2" => "application/x-bzip", ".tbz" => "application/x-bzip-compressed-tar", ".tar.bz2" => "application/x-bzip-compressed-tar", ".odt" => "application/vnd.oasis.opendocument.text", ".ods" => "application/vnd.oasis.opendocument.spreadsheet", ".odp" => "application/vnd.oasis.opendocument.presentation", ".odg" => "application/vnd.oasis.opendocument.graphics", ".odc" => "application/vnd.oasis.opendocument.chart", ".odf" => "application/vnd.oasis.opendocument.formula", ".odi" => "application/vnd.oasis.opendocument.image", ".odm" => "application/vnd.oasis.opendocument.text-master", ".ott" => "application/vnd.oasis.opendocument.text-template", ".ots" => "application/vnd.oasis.opendocument.spreadsheet-template", ".otp" => "application/vnd.oasis.opendocument.presentation-template", ".otg" => "application/vnd.oasis.opendocument.graphics-template", ".otc" => "application/vnd.oasis.opendocument.chart-template", ".otf" => "application/vnd.oasis.opendocument.formula-template", ".oti" => "application/vnd.oasis.opendocument.image-template", ".oth" => "application/vnd.oasis.opendocument.text-web", # make the default mime type application/octet-stream. "" => "application/octet-stream", )Referências
Alternativa de AddType em lighthttpd
fonte