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

関連記事