HTML SVGのデータを直接埋め込みたい
SVG形式の画像は、<img>タグでファイルを読み込む以外に、<svg>タグを使ってHTMLに直接データを埋め込むことができます。実は、SVGデータの中身は「テキストデータ」です。XMLという、HTMLに似た言語で書かれているので、ほかの画像データと違ってテキストエディタでも開くことができます。SVGがテキストデータであることから、JavaScriptプログラミング言語と組み合わせれば、Webページ上でリアルタイムに編集することができます。その利点を活かして、グラフなどを表示するときはSVGデータが良く使われます。JavaScriptと組み合わせてリアルタイムに変化するグラフィックを表示させたいときは、SVGを<img>タグで読み込むのでは、<svg>タグを使ってHTMLに直接埋め込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<style>
a{
color: #ea6357;
text-decoration: none;
-webkit-tap-highlight-color: rgb(255, 238, 148,0.8);
}
a:hover{
outline:1px solid #ea6357;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="300" height="300">
<defs>
<style>
.a{fill:#1a80b2;} </style>
</defs>
<path class="a" d="M297.64,320.94a100,100,0,1,0,100,100A100,100,0,0,0,297.64, 320.94Zm0, 152c-16.68,0-30.2-13.59-30.2-42.31s30.2-61.68,30.2-61.68,30.2,33, 30.2,61.68S314.32,472.94, 297.64,472.94Z" transform="translate(-197.64
-320.94)"/>
</svg>
</body>
</html>実行結果
SVGデータの作り方
SVGはテキストデータなので、簡単な図形であれば手でソースコードを書くこともできます。一般的にはadobe illustatorなどの、ベクターグラフィックを描けるアプリケーションを使って作成します。SVGデータをHTMLに埋め込みたい時は、一旦、Illustratorなどで作ったSVGファイルをテキストエディタで開き、中身をコピー＆ペーストします。