Chrome nie renderuje SVG, do którego odwołuje się tag <img>


100

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.


1
Czy możesz podać przykład lub zamieścić tutaj przykładowy kod?
Sirko

Naprawdę musimy być w stanie zobaczyć i odtworzyć to sami, jeśli potrzebujesz pomocy.
Phrogz

Czy jest przypadkiem, czy plik „Aged-Brass.svg” zawiera osadzony obraz? Miałem ten sam problem i do niego
doszedłem

Odpowiedzi:


131

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!


10
To działa rozwiązanie. Napotkałem ten problem podczas eksportowania inteligentnego obiektu wektorowego jako SVG za pomocą Photoshopa.
Michaił

11
To uratowało życie, godzinami próbując dowiedzieć się, na czym polega problem. Dziękuję Ci!!
mhodges

2
To samo rozwiązało mój problem, a także spędziłem dużo czasu, próbując dowiedzieć się, dlaczego obraz się nie wyświetla.
MrEvers

3
Nie miałem tej linii kodu w pliku SVG i dodanie go w tagu <svg> nic mi nie dało.
Pete

2
To powinno być daleko na górze. Uratowałeś mój dzień.
Mattia Rasulo

44

Znacznik svg wymaga atrybutu przestrzeni nazw xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>

To. Musiałem załadować go jako obraz tła div.
casey

1
Plik SVG nadal potrzebuje przestrzeni nazw. Upewnij się tylko, że jest zdefiniowany w pliku SVG, którego używasz jako tło.
huk

31

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). wprowadź opis obrazu tutaj

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.


1
Czy ktoś wie, czy można to zrobić za pomocą inteligentnego obiektu w Photoshopie? Otwarcie programu Illustrator i ponowne wyeksportowanie z tą opcją w programie Illustrator było jedyną rzeczą, która pozwoliła mi pokazać pliki SVG w Chrome, po wielu próbach innych poprawek.
Alex Podworny

2
Jaki wpływ ma ta opcja na rzeczywisty kod SVG?
Jānis Elmeris

21

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:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1
Dzięki. Ustawienie Content-Type na image / svg + xml naprawiło to.
samir 105,

Zauważ, że image/svgoferuje plik do pobrania, musi mieć +xml.
Jakub Vrána

10

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


8

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>

3

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>

3

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>


2

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

2

.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;
}

2

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.


Co się zmieniło w rzeczywistym kodzie SVG? Nie używam ani Photoshopa, ani Illustratora, muszę naprawić istniejący plik SVG.
Jānis Elmeris

W takim przypadku spróbuj odpowiedzieć @Sharif!
Mattia Rasulo

1

Początkowo wyeksportowałem plik SVG z programu Photoshop CC i musiałem ręcznie dodać plik

version="1.1"do <svg>tagu

aby wyświetlić go w przeglądarce Chrome.


1

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


1

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;" />


0

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>

0

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>

Jaka jest różnica między tymi dwoma fragmentami kodu? Nie widzę tego.
rgilligan

@rgilligan mój zły, pierwszy miał być bez doctype
Madan Bhandari

0

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


0

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.


0

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


0

Upewniam się, że dodaję styl obrazu . U mnie to zadziałało

style= "width:320; height:240"


0
Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>

0

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 swojego lighttpd.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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.