web-dev-qa-db-ja.com

Svg画像要素がSafariに表示されない

Safariブラウザ（Windowsでテストしています）は、Svg Image要素の表示に問題があるようです。

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<img src="image.svg" />

</body>
</html>

そして、これがimage.svgの内容です：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
      <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
     <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>

これをSafariで機能させるための解決策または回避策はありますか？

svgsafari
13
user2179256

ここには2つの問題があると思います。

  1. SVG画像の大きさについては何も言っていません。原則として、<svg>タグには少なくともviewBox属性を含める必要があります。例えば：

    <svg width="250" height="250" viewBox="0 0 250 250" ... >

  2. もう1つの問題は、SafariがSVGのレンダリングに特に優れていないことです。ただし、<iframe>を使用する代わりに、<object>または<img>タグを使用して埋め込むと、パフォーマンスが向上する傾向があります。例えば：

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

    また、サーバーが正しいMIMEタイプ（Content-Type: image/svg+xml）でSVGコンテンツを配信していることを確認してください。これも問題を引き起こす可能性があります。

だからこれを試してみてください：

HTMLソース：

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>

image.svg：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
      <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
     <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
12
r3mainer

私にとっての問題は、Chromeでhref属性を問題なく使用していることでした。 Safariで正しく機能するには、xlink:hrefを使用する必要があります。 xlink:hrefは廃止され、hrefに置き換えられることに注意してください。ただし、Safariではまだサポートされていません。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

32
Patrick Browne

Chromeのほとんどの時間を使用した後、Safariで作業しているアプリを確認したところ、この同じ問題を発見しました。TypeScript/ jQueryコードのこのビットを書きました（簡単に十分に問題を解決するには、プレーンJavaScriptに変換します。

export function setSvgHref(elem: JQuery, href: string) {
  elem.attr('href', href);

  if (isSafari()) {
    elem.each(function() {
      this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
    });
  }
}
3
kshetline