Mam problemy z Google Chrome, które nie renderuje pliku SVG z tagiem img. Dzieje się tak podczas odświeżania strony i początkowego ładowania strony. Mogę wyświetlić obraz, klikając „Inspecting Element”, a następnie klikając prawym przyciskiem myszy plik svg i otwierając plik svg w nowej karcie. Obraz svg zostanie następnie wyrenderowany na oryginalnej stronie.
<img src="../images/Aged-Brass.svg">
Zupełnie nie wiem, na czym polega problem. Obraz svg renderuje się dobrze w IE9 i FF, ale nie w Chrome lub Safari.
Mam też ustawione typy MIME. (obraz / svg + xml)
EDYCJA: Oto prosta strona html, którą stworzyłem, aby pomóc zilustrować mój problem.
<!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>
Jak widać, próbuję użyć pliku svg zarówno w tagu img, jak iw css jako obrazu tła. Nie działaj na początkowym ładowaniu strony w Chrome lub Safari. Kiedy sprawdzam element, klikam prawym przyciskiem myszy svg lub klikam link do wczytania svg w innym oknie, plik svg zostanie wyrenderowany w oryginalnej karcie.
źródło
Odpowiedzi:
Prosty i łatwy sposób; zgodnie z https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Musisz otworzyć plik .SVG za pomocą edytora tekstu (np. notatnika) i zmienić
xlink:href="data:img/png;base64,do:
xlink:href="data:image/png;base64,zadziałało dla mnie!
źródło
Znacznik svg wymaga atrybutu przestrzeni nazw xmlns:
<svg xmlns="http://www.w3.org/2000/svg"></svg>źródło
Przyszedłem tutaj, ponieważ miałem ten sam problem, kiedy sprawdzam element, widzę plik, ale na stronie nie mogę (nawet gdy używam localhost)
odpowiedzią na mój problem było zapisanie pliku SVG. Jeśli zapisałeś go z programu Illustrator, kliknij „osadz”, a nie „link”. jako łącze będzie po prostu odnosić się do plików lokalnych, a nie zawierać danych (jeśli dobrze to rozumiem).
Przeczytałem o tym w witrynie Adobe, która zawiera kilka innych przydatnych wskazówek dotyczących eksportu http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
To działało dla mnie, mam nadzieję, że było przydatne.
źródło
Przyszedłem tutaj, ponieważ miałem podobny problem, obraz nie był renderowany. Dowiedziałem się, że nagłówek typu zawartości mojego serwera testowego nie był poprawny. Naprawiłem to, dodając do mojego pliku .htaccess:
źródło
image/svgoferuje plik do pobrania, musi mieć+xml.<object>Zamiast tego użyj (oczywiście zastąp każdy adres URL własnym):.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>źródło
Dodanie atrybutu szerokości do tagu [svg] (poprzez edycję źródłowego XML svg) zadziałało dla mnie: np:
<!-- 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>źródło
Udało mi się użyć twojej próbki do stworzenia strony testowej i działało dobrze. Zakładam, że coś jest nie tak z twoim plikiem SVG. Czy możesz to również wkleić tutaj? Oto próbka, której użyłem.
<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>źródło
wygląda jak błąd Chrome, zrobiłem coś innego, ponieważ prawie oszalałem z tego powodu ... używając debugera Chrom, jeśli zmienisz css obiektu SVG, który wyświetla się na ekranie.
więc co zrobiłem to: 1. sprawdzenie rozmiaru ekranu 2. odsłuchanie zdarzenia "load" mojego obiektu SVG 3. po załadowaniu elementu zmieniam jego css za pomocą jQuery 4. załatwiło to za mnie
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>źródło
Miałem podobny problem i istniejące odpowiedzi na to albo nie miały zastosowania, albo działały, ale nie mogliśmy ich użyć z innych powodów. Musiałem więc dowiedzieć się, czego Chrome nie lubi w naszych plikach SVG.
W naszym przypadku okazało się, że
idatrybutsymboltagu w pliku SVG miał w sobie znak:, którego Chrome nie lubił. Jak tylko usunąłem:, działało dobrze.Zły:
<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>Dobry:
<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>źródło
.svgobraz nie ma początkowej wysokości i szerokości. Dlatego nie jest widoczny. Musisz to ustawić.Możesz to zrobić in-line lub w pliku css:
W linii:
<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">Plik CSS:
<img src="../images/Aged-Brass.svg" class="image" alt="logo">.image { width: 100px; height: 50px; }źródło
W moim przypadku ten problem utrzymywał się, gdy utworzyłem i zapisałem plik svg w programie Photoshop. Pomogło otwarcie pliku za pomocą programu Illustrator i późniejsze wyeksportowanie pliku svg.
źródło
Początkowo wyeksportowałem plik SVG z programu Photoshop CC i musiałem ręcznie dodać plik
version="1.1"do<svg>taguaby wyświetlić go w przeglądarce Chrome.
źródło
Typ treści w nagłówku HTTP z serwera był dla mnie problemem. Mam serwer node.js, dodano:
if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) { res.writeHead(200, { "Content-Type": "image/svg+xml" }); }nazwa_strony jest moją lokalną zmienną dla tego, co jest wymagane.
Domyślam się, że to częsty problem! Używam aktualnej wersji przeglądarki Chrome (marzec 2020 r.).
źródło
U mnie ustawienie szerokości / wysokości na obraz działał.
<asp:Image runat="server" ID="Icon" Style="max-width: 50px; max-height: 50px; position: relative;" />źródło
Miałem ten sam problem. Jeśli serwer jest poprawnie skonfigurowany, a .htacces nie jest odpowiedzią, możesz zajrzeć do źródła svg, które osadzasz. Moje zostały stworzone za pomocą edytora tekstu, dobrze renderowanego w Chrome i Safari w kodzie html5, po osadzeniu nic nie było widoczne. Dodano poprawną wersję, wymiary itp. Do kodu svg i działa jak urok. Ponadto wszystkie style są wbudowane.
To znaczy
<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>źródło
U mnie też ten sam problem z chrome, po dodaniu
DOCTYPEdziała zgodnie z oczekiwaniami<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">Przed
<?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>Po
<?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>źródło
Uważaj, aby nie mieć właściwości css przejścia dla obrazów svg
Nie wiem dlaczego, ale jeśli zrobisz: "przejście: wszystko ułatwia 0,3 s" dla obrazu svg w Chrome obrazy się nie pojawiają
na przykład:
* { transition: all ease 0.3s }Chrome nie renderuje svg.
Usuń wszelkie właściwości CSS przejścia i spróbuj ponownie
źródło
W przypadku problemów spróbuj najpierw otworzyć obrazy za pomocą programu, który jest w stanie odczytać obrazy svg.
Jeśli to się nie powiedzie, obraz svg jest w jakiś sposób uszkodzony.
Miałem taki przypadek i skopiowałem ścieżki svg do nowego obrazu svg i poprawiłem wszystkie szczegóły tagów svg.
Nigdy nie testowałem powodu, dla którego nie renderował, ale przypuszczałem, że niektóre niewidoczne znaki specjalne spowodowały błąd renderowania. Czasami edytowane pliki na Macu miałem już ten problem w innym kontekście.
źródło
Miałem ten sam problem z obrazem SVG dołączonym za pośrednictwem tagu IMG. Okazało się, że Chrome nie podoba się, że na początku pliku jest pusta linia.
Usunąłem pustą linię i mój SVG natychmiast zaczął renderować.
źródło
Upewniam się, że dodaję styl obrazu . U mnie to zadziałało
style= "width:320; height:240"źródło
Just replace <img> tag to <object> tag for SVG image. <object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>źródło
Lighttpd
Mój problem polegał na tym, że brakowało
svgmodułu obsługi MIME dla plików w pliku konfiguracyjnym lighttpd. Dodanie tych do swojegolighttpd.confmoże rozwiązać twój problem: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", )Bibliografia
Alternatywa dla AddType w lighthttpd
źródło