BinaryDevelop
  1. ホーム
  2. svg

[解決済み] SafariでSvg画像要素が表示されない

2022-03-07 23:57:19

質問

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で動作させるための解決策や回避策はありますか？

どのように解決するのですか？

ここで、2つの問題があると思います。

  1. SVG画像の大きさについて何も言っていませんね。原則として、最低でも viewBox 属性は <svg> タグを使用します。例えば 

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

  2. もうひとつの問題は、SafariがSVGのレンダリングに特別優れているわけではないことです。しかし、SVGを <iframe> または <object> タグを使用する代わりに <img> . 例えば 

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

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

では、これを試してみてください。

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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します