Svgファイルを表示
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
xmlについて
下のように打ちました。(HTML)
そして下のように打ちました。(svg)
しかし、「svg参照」という言葉は映るのに肝心のsvgが表示されません。なぜなんでしょうか。
•svgとhtmlは同じファイルにあります。
•Microsoft edgeです。
下のように打ちました。(HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVG</title>
</head>
<body>
<header>
<h1>SVG参照</h1>
</header>
<object type="image/svg+xml" data="line0.svg" width="30" height="30"></object>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVG</title>
</head>
<body>
<header>
<h1>SVG参照</h1>
</header>
<object type="image/svg+xml" data="line0.svg" width="30" height="30"></object>
</body>
</html>
そして下のように打ちました。(svg)
<?xml version="1.0" standalone="yes"?>
<svg>
<line x1="0" y1="0" x2="20" y2="0" stroke="black" stroke-width="2" />
</svg>
<svg>
<line x1="0" y1="0" x2="20" y2="0" stroke="black" stroke-width="2" />
</svg>
しかし、「svg参照」という言葉は映るのに肝心のsvgが表示されません。なぜなんでしょうか。
•svgとhtmlは同じファイルにあります。
•Microsoft edgeです。
Suzunox さん
10月25日 01時11分
Suzunoxさん、こんにちは。
私の環境では、edgeのみならず他のブラウザでも表示されないみたいですね。
試しに直接ブラウザからSVGファイルを開いたところ、以下の様な表示となり、エラー扱いされていることが分ります。
結論としては、以下のように名前空間の宣言をし、viewBoxで位置・サイズ指定することで、エラーが無くなりHTMLからも表示されました。
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<line x1="0" y1="0" x2="20" y2="0" stroke="black" stroke-width="2" />
</svg>
私の環境では、edgeのみならず他のブラウザでも表示されないみたいですね。
試しに直接ブラウザからSVGファイルを開いたところ、以下の様な表示となり、エラー扱いされていることが分ります。
Chrom:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
Firefox:
この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。
この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。
結論としては、以下のように名前空間の宣言をし、viewBoxで位置・サイズ指定することで、エラーが無くなりHTMLからも表示されました。
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<line x1="0" y1="0" x2="20" y2="0" stroke="black" stroke-width="2" />
</svg>
馬場誠 さん
10月25日 08時05分
