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 などのベクターグラフィックを描けるアプリケーションを使って作成します。