そもそもSVGとは？変換ツールや使用方法のコツ！
今回は、ここ数年で増え始めてきたSVGにつきまして、ホームページ作成初心者の方に向け、使いかたのコツや使用方法、また、SVG変換ツールを交え詳しく記載してみようと思います。
JPEG、GIF、PNGは、私が制作を始めた2000年代前半からすでに、使用しているサイトを多々見受けることができましたが、実はSVG自体は画像フォーマットとしては、W3Cによって1998年に作れられていました。
しかしながら、変換方法などが限られていたことが原因と思いますが、2000年代前半ではそれほど見かける事はありませんでした。2022年現在、CIやロゴ、アイコンなどでSVGを見かけることが増えてきましたので、サイト制作初心者の方へ向け詳しく記載してみようと思います。
という事で、それでは今回はッ、
- ・そもそもSVGとは？
- ・PNG画像をSVGに変換！
- ・SVG画像の使いかたのコツ！
上記について記載していこうと思います…。
そもそもSVGとは？
SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、拡張可能なベクター画像といった意味になるかと思います。
PNGやJPEGなどがピクセルの集まりとして表現されるビットマップ画像であるのに対して、ベクター画像は曲線を描いたり一定の範囲を塗りつぶしたりといった処理を座標と数式によって行えることが特徴です。
上記を簡単に説明してみると、SVGで作成した画像は、画像自体を大きくや小さくしても画像が荒れることがない！ということがSVGの特徴といえます。
また、この特徴の最大限の利点は、現在のウェブページ制作では、レプポンシブデザインでページ作成を行う前提としてiPhoneなどに採用されているRetina Displayのような高精細ディスプレイでも、SVGなら1ファイルのみで対応できることがあげられます。
しかしながらベクター画像ですから、写真などの特徴的な微妙な色のグラデーションなどを表現することは、あまり好ましくありません。
上記を踏まえると、初めに記載いたしましたとおり、CIやロゴ、アイコンなどの単調な色使いで、また、デバイスによってサイズを変更しなければならない際に使用することが、使いどころとなるように感じます。
さらにもう少し分かりやすく説明すると、このページ「MK-BLOG」のロゴ、こちらはグラデーションが付いたシャドーが入っていますので、残念ながらSVGで表現すると荒れてしまいますが、シャドーがない状態であれば、SVGで作成することが可能で、サイズ自体も小さく表現できることと思います。
PNG画像をSVGに変換！
SVGファイルの作成方法は、ベクター画像を作成できるツールを利用する方法になります。
一般的には、Adobe Illustratorなどを使用することが多いことと思いますが、私などはここ最近、Illustratorを使用することはほぼ無く、Inkscapeを使用することが多々ございます。
ウェブデザイナーの方であれば、Adobe Photoshopを使用する方が多いことと思いますが、ここで朗報！！
PhotoshopでPNG画像を作成後、無料でSVGに変換できるサービスを今回ご紹介してみます。
対応しているフォーマットはPNG、GIF、JPEGなど色々な画像に対応しているようです。
変換できるファイル数に制限がありますが、基本的に無料。
SVG画像の使いかたのコツ！
すでに多々ご説明いたしましたとおり、ウェブサイトであれば、ロゴやアイコンをSVGで作成するのが良いことのように感じます。
メリットといたしましては、単純な画像であればPNGよりも軽量で、しかも拡大しても画像が荒れることはありません。
また、デメリットといたしましては、綺麗なグラデーションなどの表現には不向きにで、仮にSVGに変換してもJPEGやPNGよりもサイズが大きくなってしまう可能性もあります。
SVG形式の画像ファイル表示方法
SVG形式の画像を使用するにはふたつの方法があります。そのひとつはimgタグを使って、SVGファイルのパスを指定する方法になります。
imgタグでwidth属性、height属性でサイズを指定せずに読み込んだ場合、SVGファイルは可能な限り大きく表示されることに注意が必要です。そのため、今回のサンプルではwidth属性だけをしていして、SVGファイルを読み込んでみます。
| <p>Sponsored by</p> |
| <span class=”sponsor”><img src=”images/MK-blog.svg” alt=”MK-blog” width=”250″></span> |
▼ ブラウザ表示
・point
width属性、height属性のどちらか片方を指定する
SVGに限らずどんな画像でも、imgタグのwidth属性、height属性のどちらか片方だけを指定しておくと、もともとの画像の縦横比を維持したまま、拡大・縮小して表示させることができます。
SVG形式の画像データをHTMLに直接埋め込み
SVG形式の画像は、imgタグでファイルを読み込む以外に、SVGタグを使ってHTMLに直接データを埋め込むことができます。
実は、SVGデータの中身は「テキストデータ」です。XMLという、HTMLに似た言語で書かれているので、他の画像データと異なりテキストエディタでも開くことができます。
SVGがテキストデータであることから、JavaScriptプログラミング言語と組み合わせれば、Webページ上でリアルタイムに編集することができます。その利点を生かして、グラフなどを表示するときにはSVGデータがよく使われます。
また、JavaScriptと組み合わせ表示を行う場合は、SVGをimgタグで読み込むのではなく、svgタグを使ってHTMLに直接埋め込みます。
| <svg version=”1.0” xmlns=”http://www.w3.org/2000/svg” width=”252.000000pt” height=”38.000000pt” viewBox=”0 0252.000000 38.000000” preserveAspectRatio=”xMidYMid meet”> |
| <g transform=”translate(0.000000,36.000000) scale(0.100000,-0.100000)” fill=”#000000” stroke=”none”> |
| <path d=”M7 354 c-4 -4 2 -13 12 -21 13 -8 39 -71 73 -173 29 -88 55 -160 59 -160 10 0 69 213 68 245 l-1 30 -10 -35 -10 -35 -28 75 -27 75 -65 3 c-35 2 -67 0 -71 -4z”/> |
| <path d=”M240 195 c0 -103 -4 -165 -10 -165 -5 0 -10 -7 -10 -15 0 -12 15 -15 74 -15 77 0 97 9 71 30 -12 10 -15 40 -15 150 0 110 3 140 15 150 25 21 7 30 -61 30 l-64 0 0 -165z”/> |
| <path d=”M466 351 c-3 -5 1 -14 9 -21 12 -10 15 -40 15 -150 0 -110 -3 -140 -15 -150 -26 -21 -6 -30 71 -30 59 0 74 3 74 15 0 8 -4 15 -10 15 -6 0 -10 57 -10 150 0 93 4 150 10 150 6 0 10 7 10 15 0 12 -15 15 -74 15 -41 0 -77 -4 -80 -9z”/> |
| <path d=”M670 351 c0 -5 7 -14 15 -21 22 -19 19 -31 -27 -95 l-41 -58 22 -69 c16 -50 20 -73 12 -82 -17 -21 -2 -26 74 -26 79 0 92 5 71 29 -8 9 -33 63 -55 121 -38 98 -40 106 -25 128 9 13 29 31 45 40 47 28 37 42 -31 42 -33 0 -60 -4 -60 -9z”/> |
| <path d=”M40 137 c0 -63 -4 -90 -15 -101 -26 -25 -17 -36 30 -36 49 0 53 4 29 32 -11 12 -19 46 -24 98 -10 109 -20 113 -20 7z”/> |
| </g> |
| </svg> |
▼ ブラウザ表示
といことで今回は、SVGにつきまして、使いかたのコツや使用方法、また、SVG変換ツールを交え詳しく記載してみみました。
私がSVGを使う場合は、やっぱりロゴデザインなどで使用するのが、一番多いように感じます。また、直接SVGを埋め込む際は、初心者の方に向け補足といたしまして、SVGを作成後、一旦テキストエディタで開き、中身をコピーアンドペーストして使用することをおすすめします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
