【HTML】SVG画像とは？　SVG画像の表示方法をサクッとご紹介

プログラミングを勉強中のみなさん、こんにちは！

今回は、SVG画像の表示方法を紹介します。

普段何気なく使っている画像ですが、jpg や　png などの形式はけっこう見慣れていると思います。
しかし、SVGと聞くと、何ぞや、と思う人もいると思います。

今回はそのSVGについて触れたいと思います。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

SVG画像とは

SVG画像は、ベクター画像のファイル形式です。

※ベクター画像とは、画像を数値で記録している画像形式です。
（これ以上掘り下げると、脱線してしまうので、今回は割愛します）

拡張子は「.svg」や「.svgz」で表示されます。

画質を保ったまま、拡大や縮小が可能です。
そして、容量が小さいです。

表示方法

表示方法は特別なものではありません。

いつもどおり、
<img src="〇〇">タグを使います。

〇〇にはパスを入れるだけです。

まとめ

SVG画像

• ベクター画像のファイル形式
• 拡張子は「.svg」や「.svgz」
• 画質を保ったまま拡大や縮小が可能
• タグは<img>

ぜひみなさんもやってみてください。

「画像」に関連する記事も紹介しておきます。