HTML & CSS - SVG 形式の画像ファイルを表示する
SVG 形式の画像ファイルを表示する
SVG 形式の画像ファイルを表示するには、img 要素の中に記述します。img 要素の代表的な属性として src、alt、width、height があります。
src- 画像のパスを指定します。
alt- 画像が表示されないときの代替テキストを指定します。
width- 画像の幅（ピクセル単位）を指定します。
height- 画像の高さ（ピクセル単位）を指定します。
<!DOCTYPE html>
<html lang="ja">
...
<img src="img/logo.svg" alt="ロゴ" width="50" height="50">
...
</html>SVG 形式の画像ファイルを表示する - HTML
SVG 形式の画像ファイルを表示するには img 要素で読み込む以外にも svg 要素を使って HTML に直接データを埋め込むことができます。
<!DOCTYPE html>
<html lang="ja">
...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="50" height="50">
<path d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path>
</svg>
...
</html>SVG 形式の画像ファイルを表示する - HTML
SVG 形式のデータの中身は XML と呼ばれるテキストデータです。他の画像データと異なりテキストエディタでも開くことができます。SVG データの作り方は、一般的に Adobe Illustrator などのベクターグラフィックを描けるアプリケーションを使って作成します。