MENU
  1. ホーム
  2. コード
  3. SVGファイルの使い方や変換方法はどうすればいいの？

SVGファイルの使い方や変換方法はどうすればいいの？

コード

コーディングを学び始めたとき、使い方がよくわからなかったものの一つにSVGファイルがあります。

ウチノ

別にpngファイルでいいんじゃないの？

てな感じで思っていました。

しかし実務に関わると取引先から

くらいあん

アイコンはSVGファイルで書き出しお願いします！

と指定されたことをきっかけに調べました。

もちろんその時全てのことを理解していたわけではありませんが、それから今まで業務を通じて学んだことを共有したいと思います。

目次

SVGとは何か？

ベクタ形式であるため、拡縮自在である。その他に、XMLベースの為、ウェブブラウザで（画像として、という意味ではなく、HTMLのソースビュー等と同様に、という意味で）閲覧でき、テキストエディタ等で編集できる。また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。

ウィキペディアより

ウィキペディアで調べてみました。SVGについてのページで特徴を書き出しましたが、当時は　はぁ？　って感じで全く意味がわかりませんでした。

そこでおもいっきりシンプルに考えました。

  • 拡大・縮小しても画質が劣化しない
  • レスポンシブに相性がいい

この感覚で進めました。

それではメリットについて詳しく見てみましょう。

SVGを使うメリット

1. どんなサイズでもキレイに表示でき、色んなサイズに対応可能

拡大しても画質が劣化しないので、どんなデバイスでも鮮明な画像を表示できます。さらにレスポンシブ対応のため複数サイズの画像を用意する必要がありません。

2. 軽量でサイト表示が速い

通常の画像よりもファイルサイズが小さくなることが多く、Webサイトの読み込み速度アップにつながります。

3. CSSでカスタマイズ可能

色や線の太さを簡単に変更したり、アニメーションを追加したりできます。

4. テキストとして扱える

SVGはテキストデータなので、検索エンジンが内容を読み取れたり、音声読み上げソフトで内容を読み上げられたりします。

メリットの恩恵を正しく受けるには、SVGファイルの表示方法を知る必要があります。下記｢HTMLでSVGを表示する4つの方法｣で詳しく記載しております。

SVGファイルの変換方法

ここではPNGファイルからSVGに変換する、またはその逆のパターンについて説明します。

他の形式から変換

PNGやJPEGなどの画像を、Image Vectorizerなどのツールを使ってSVGに変換できます。

個人的なおすすめは、今回の画像ファイルを含め多くの種類のファイルを変換できる便利なサイト、https://convertio.co/ja/ です。

私もフォントを変換する場合などに利用しています。（詳細はサイトをご確認ください。）

ちなみにPNGファイルをSVGに変換して画像は荒くならないのかと疑問に思われる方もいるでしょう。

アイコンに使用するサイズのPNGファイルをSVG変換後にファイルを拡大して見比べてみました。

かなり拡大しないとわからないくらいPNGファイルよりきれいなSVGファイルでした。

画像の内容によって変わる部分はあるので実際のファイルで確認してください。

SVGファイルの軽量化（最適化）

SVGファイルは不要なデータを削除することでさらに軽くできます。

ダウンロードサイトから下のアイコンを取得して確認してみました。

中身をみてみます。

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="_x35_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 538.864" style="enable-background:new 0 0 800 538.864;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#040000;}
</style>
<g>
	<path class="st0" d="M266.245,56.235c-1.396,0.901-3.358,1.351-5.888,1.351c-2.028,0-3.948-0.316-5.758-0.949
		c-1.811-0.632-3.444-1.563-4.9-2.794l-3.301,4.964c1.213,1.023,2.552,1.881,4.017,2.574c1.463,0.693,3.032,1.218,4.704,1.573
		c1.672,0.355,2.508,0.533,2.508,0.533s0.91,0,2.73,0c2.98,0,5.527-0.437,7.642-1.313c2.115-0.875,3.726-2.153,4.836-3.834
		c1.108-1.681,1.664-3.699,1.664-6.057v-0.052c0-2.513-0.529-4.497-1.586-5.953c-1.057-1.455-2.37-2.512-3.938-3.171
		c-1.569-0.659-3.522-1.222-5.862-1.69c-0.087-0.017-0.182-0.034-0.286-0.052c-0.104-0.017-0.2-0.034-0.286-0.052
		c-0.069-0.017-0.135-0.03-0.195-0.039c-0.06-0.009-0.126-0.021-0.195-0.038c-1.819-0.364-3.236-0.706-4.25-1.027
		c-1.014-0.32-1.858-0.827-2.534-1.52c-0.676-0.693-1.014-1.638-1.014-2.834v-0.026c0-1.594,0.653-2.829,1.962-3.704
		c1.309-0.876,3.159-1.313,5.55-1.313c1.438,0,2.911,0.269,4.419,0.806c1.508,0.537,2.99,1.325,4.445,2.365l3.015-5.121
		c-1.23-0.866-2.499-1.59-3.808-2.17c-1.309-0.581-2.643-1.023-4.003-1.327c-1.36-0.302-2.716-0.454-4.068-0.454
		c-2.877,0-5.338,0.442-7.382,1.326c-2.045,0.884-3.605,2.174-4.678,3.873c-1.075,1.699-1.612,3.743-1.612,6.135v0.026
		c0,2.703,0.572,4.792,1.715,6.265c1.144,1.473,2.53,2.495,4.159,3.067c1.629,0.572,3.709,1.066,6.239,1.482l0.468,0.078
		c0.052,0.018,0.104,0.026,0.157,0.026c0.052,0,0.103,0.009,0.156,0.026c1.577,0.277,2.868,0.576,3.873,0.897
		c1.005,0.32,1.819,0.823,2.443,1.508c0.624,0.685,0.936,1.607,0.936,2.768v0.026C268.338,54.06,267.64,55.334,266.245,56.235z"></path>
	<path class="st0" d="M287.184,61.758c2.045,1.153,4.411,1.729,7.096,1.729c2.686,0,5.051-0.576,7.097-1.729
		c2.044-1.152,3.63-2.781,4.757-4.887s1.689-4.545,1.689-7.317v-10.71c0-2.772-0.562-5.212-1.689-7.317s-2.712-3.735-4.757-4.887
		c-2.046-1.152-4.411-1.729-7.097-1.729c-2.686,0-5.051,0.576-7.096,1.729c-2.045,1.152-3.631,2.781-4.757,4.887
		s-1.689,4.545-1.689,7.317v10.71c0,2.773,0.562,5.212,1.689,7.317S285.138,60.606,287.184,61.758z M287.132,38.662
		c0-1.508,0.295-2.837,0.884-3.99c0.589-1.152,1.426-2.04,2.509-2.665c1.083-0.624,2.334-0.936,3.756-0.936
		c1.422,0,2.673,0.312,3.757,0.936c1.083,0.624,1.919,1.512,2.508,2.665c0.589,1.153,0.884,2.482,0.884,3.99v11.074
		c0,1.508-0.295,2.838-0.884,3.99c-0.589,1.153-1.425,2.04-2.508,2.665c-1.083,0.624-2.335,0.936-3.757,0.936
		c-1.421,0-2.673-0.312-3.756-0.936c-1.083-0.624-1.92-1.512-2.509-2.665c-0.589-1.152-0.884-2.482-0.884-3.99V38.662z"></path>
	<path class="st0" d="M321.379,61.784c2.019,1.136,3.029,1.703,3.029,1.703s1.368,0,4.107,0c2.253,0,4.302-0.485,6.148-1.455
		c1.845-0.971,3.379-2.37,4.601-4.198c1.221-1.828,2.066-3.99,2.534-6.485h-6.394c-0.295,1.265-0.781,2.348-1.457,3.249
		c-0.675,0.901-1.477,1.586-2.404,2.054c-0.927,0.468-1.937,0.702-3.028,0.702c-1.439,0-2.683-0.32-3.73-0.962
		c-1.049-0.641-1.859-1.559-2.431-2.755c-0.573-1.196-0.858-2.608-0.858-4.237V39.027c0-1.629,0.285-3.041,0.858-4.237
		c0.572-1.195,1.382-2.119,2.431-2.768c1.047-0.65,2.29-0.975,3.73-0.975c1.075,0,2.075,0.243,3.002,0.728
		c0.927,0.486,1.728,1.183,2.404,2.093c0.676,0.91,1.17,1.971,1.483,3.185h6.394c-0.45-2.496-1.287-4.657-2.508-6.486
		c-1.222-1.828-2.755-3.227-4.601-4.198c-1.846-0.97-3.904-1.456-6.174-1.456c-2.739,0-5.117,0.572-7.136,1.715
		c-2.019,1.144-3.57,2.773-4.653,4.887c-1.083,2.114-1.625,4.618-1.625,7.512v10.372c0,2.894,0.541,5.398,1.625,7.512
		C317.809,59.025,319.36,60.649,321.379,61.784z"></path>
	<rect x="348.557" y="25.301" class="st0" width="6.343" height="37.795"></rect>
	<path class="st0" d="M369.01,55.922h14.565l2.491,7.175h6.68l-14.193-37.795h-4.523l-14.193,37.795h6.681L369.01,55.922z
		 M376.292,34.945l5.216,15.025h-10.432L376.292,34.945z"></path>
	<polygon class="st0" points="404.158,63.097 422.744,63.097 422.744,57.144 404.158,57.144 404.158,25.301 397.946,25.301 
		397.946,63.097 400.857,63.097 	"></polygon>
	<path class="st0" d="M268.896,84.202c-2.193-1.057-4.831-1.586-7.916-1.586h-6.031h-2.625h-3.587v37.796h3.587h2.625h6.005
		c3.136,0,5.8-0.546,7.993-1.638c2.192-1.092,3.851-2.651,4.978-4.679s1.69-4.436,1.69-7.226v-10.71c0-2.86-0.572-5.303-1.715-7.33
		C272.755,86.801,271.088,85.258,268.896,84.202z M269.221,107.076c0,2.357-0.707,4.177-2.119,5.459
		c-1.412,1.282-3.401,1.924-5.965,1.924h-6.187V88.568h6.187c2.565,0,4.553,0.641,5.965,1.924c1.412,1.283,2.119,3.102,2.119,5.459
		V107.076z"></path>
	<rect x="283.414" y="82.615" class="st0" width="6.342" height="37.796"></rect>
	<path class="st0" d="M299.4,87.425c-1.075,1.698-1.612,3.743-1.612,6.135v0.026c0,2.703,0.573,4.792,1.716,6.265
		c1.144,1.473,2.53,2.495,4.159,3.068c1.629,0.572,3.708,1.065,6.239,1.481l0.468,0.078c0.052,0.017,0.103,0.026,0.157,0.026
		c0.052,0,0.103,0.009,0.155,0.026c1.577,0.277,2.868,0.576,3.874,0.897c1.004,0.321,1.819,0.823,2.443,1.508
		c0.624,0.685,0.936,1.607,0.936,2.768v0.027c0,1.646-0.698,2.92-2.093,3.821c-1.395,0.901-3.358,1.352-5.888,1.352
		c-2.027,0-3.947-0.316-5.758-0.949c-1.811-0.633-3.444-1.564-4.9-2.795l-3.301,4.965c1.213,1.022,2.552,1.88,4.016,2.573
		c1.464,0.694,3.033,1.218,4.705,1.573c1.672,0.355,2.508,0.533,2.508,0.533s0.91,0,2.73,0c2.98,0,5.528-0.437,7.642-1.313
		c2.114-0.875,3.726-2.153,4.835-3.834c1.109-1.68,1.664-3.699,1.664-6.057v-0.052c0-2.512-0.529-4.497-1.585-5.953
		c-1.057-1.455-2.37-2.512-3.938-3.171c-1.569-0.658-3.522-1.221-5.862-1.69c-0.087-0.017-0.182-0.034-0.286-0.052
		c-0.104-0.017-0.2-0.034-0.287-0.052c-0.068-0.017-0.134-0.03-0.194-0.039c-0.06-0.009-0.126-0.022-0.195-0.039
		c-1.82-0.364-3.236-0.706-4.25-1.027c-1.014-0.32-1.859-0.827-2.534-1.52c-0.676-0.693-1.014-1.638-1.014-2.834v-0.026
		c0-1.594,0.653-2.829,1.962-3.704c1.309-0.875,3.158-1.313,5.55-1.313c1.438,0,2.911,0.269,4.419,0.806
		c1.507,0.537,2.989,1.325,4.445,2.365l3.015-5.121c-1.23-0.866-2.499-1.59-3.808-2.17c-1.309-0.58-2.643-1.023-4.003-1.326
		c-1.36-0.303-2.717-0.455-4.068-0.455c-2.877,0-5.338,0.442-7.382,1.326C302.034,84.435,300.474,85.727,299.4,87.425z"></path>
	<polygon class="st0" points="342.602,120.412 342.602,88.568 353.104,88.568 353.104,82.615 325.915,82.615 325.915,88.568 
		336.417,88.568 336.417,120.412 	"></polygon>
	<path class="st0" d="M362.276,113.237h14.565l2.491,7.175h6.68L371.82,82.615h-4.523l-14.193,37.796h6.681L362.276,113.237z
		 M369.559,92.26l5.216,15.024h-10.433L369.559,92.26z"></path>
	<polygon class="st0" points="397.971,82.615 391.212,82.615 391.212,120.385 397.243,120.385 397.243,92.841 412.839,120.385 
		419.651,120.385 419.651,82.615 413.62,82.615 413.62,110.589 	"></polygon>
	<path class="st0" d="M433.986,119.099c2.018,1.135,3.028,1.702,3.028,1.702s1.368,0,4.107,0c2.253,0,4.302-0.484,6.148-1.455
		c1.845-0.97,3.379-2.369,4.601-4.198c1.221-1.828,2.067-3.99,2.535-6.485h-6.395c-0.295,1.265-0.781,2.348-1.456,3.249
		c-0.676,0.901-1.477,1.586-2.405,2.054c-0.927,0.468-1.937,0.702-3.028,0.702c-1.439,0-2.682-0.32-3.73-0.962
		c-1.049-0.641-1.859-1.56-2.431-2.756c-0.572-1.195-0.857-2.607-0.857-4.237V96.341c0-1.629,0.285-3.041,0.857-4.237
		c0.572-1.196,1.382-2.119,2.431-2.769c1.048-0.65,2.291-0.975,3.73-0.975c1.075,0,2.076,0.243,3.002,0.728
		c0.927,0.486,1.729,1.183,2.405,2.093c0.675,0.91,1.17,1.971,1.482,3.185h6.395c-0.451-2.495-1.287-4.657-2.509-6.485
		c-1.222-1.829-2.756-3.228-4.601-4.198c-1.845-0.97-3.904-1.456-6.174-1.456c-2.739,0-5.117,0.572-7.135,1.716
		c-2.019,1.144-3.57,2.773-4.653,4.887c-1.083,2.115-1.625,4.618-1.625,7.512v10.372c0,2.894,0.541,5.398,1.625,7.512
		C430.416,116.339,431.967,117.964,433.986,119.099z"></path>
	<rect x="461.163" y="82.615" class="st0" width="6.342" height="37.796"></rect>
	<polygon class="st0" points="482.115,92.841 497.711,120.385 504.521,120.385 504.521,82.615 498.491,82.615 498.491,110.589 
		482.842,82.615 476.084,82.615 476.084,120.385 482.115,120.385 	"></polygon>
	<path class="st0" d="M526.616,105.621h6.706v1.144c0,1.612-0.29,3.002-0.87,4.172c-0.58,1.169-1.408,2.062-2.482,2.677
		c-1.075,0.615-2.323,0.923-3.743,0.923c-1.439,0-2.708-0.29-3.809-0.871c-1.1-0.58-1.95-1.404-2.547-2.469
		c-0.598-1.066-0.897-2.3-0.897-3.705V96.341c0-1.559,0.295-2.933,0.884-4.12c0.589-1.187,1.417-2.105,2.483-2.755
		c1.066-0.65,2.309-0.974,3.73-0.974c0.971,0,1.911,0.194,2.82,0.584c0.909,0.39,1.698,0.958,2.365,1.703
		c0.667,0.745,1.148,1.638,1.443,2.677h6.707c-0.452-2.235-1.3-4.202-2.548-5.9c-1.248-1.698-2.808-3.011-4.678-3.938
		c-1.872-0.927-3.908-1.391-6.109-1.391c-2.686,0-5.047,0.585-7.083,1.754c-2.037,1.17-3.613,2.821-4.732,4.953
		c-1.117,2.131-1.676,4.601-1.676,7.408v11.151c0,2.652,0.567,4.983,1.702,6.993c1.136,2.01,2.734,3.565,4.797,4.666
		c2.062,1.1,4.444,1.65,7.149,1.65c2.685,0,5.047-0.584,7.083-1.755c2.036-1.169,3.613-2.824,4.732-4.965
		c1.117-2.139,1.676-4.614,1.676-7.421v-6.992h-13.102V105.621z"></path>
	<path class="st0" d="M181.185,168.018c-4.528-29.995-35.496-43.313-49.857-49.898c-10.259-4.704-15.58-9.531-17.371-19.28
		c-1.674-5.861,0.21-10.508,5.164-18.478c7.315-11.768,16.305-24.125,16.305-38.383c0-22.44-18.191-40.631-40.631-40.631
		c-22.44,0-40.631,18.191-40.631,40.631c0,14.258,8.99,26.616,16.305,38.383c4.955,7.97,6.838,12.618,5.163,18.478
		c-1.791,9.748-7.112,14.575-17.371,19.28c-14.361,6.585-45.329,19.903-49.857,49.898C4.64,192.96,4.209,278.595,2.024,316.846
		c-0.474,8.292,5.996,15.337,14.298,15.571c7.695,0.217,12.793-6.543,13.603-14.198l6.911-91.281
		c0.647-3.095,5.203-2.624,5.203,0.538v94.274v197.429c0,10.128,8.211,18.339,18.339,18.339l0,0c9.58,0,17.545-7.373,18.285-16.924
		l13.579-175.387c0.122-1.575,1.337-2.362,2.552-2.362c1.215,0,2.43,0.787,2.552,2.362l13.578,175.387
		c0.74,9.551,8.706,16.924,18.285,16.924l0,0c10.129,0,18.339-8.211,18.339-18.339V321.749v-94.274c0-3.162,4.556-3.633,5.203-0.538
		l6.911,91.281c0.811,7.655,5.908,14.415,13.603,14.198c8.302-0.234,14.772-7.279,14.298-15.571
		C185.381,278.595,184.951,192.96,181.185,168.018z"></path>
	<path class="st0" d="M797.976,316.846c-2.185-38.251-2.615-123.885-6.38-148.828c-4.528-29.995-35.496-43.313-49.857-49.898
		c-10.259-4.704-15.58-9.531-17.371-19.28c-1.674-5.861,0.21-10.508,5.164-18.478c7.315-11.768,16.305-24.125,16.305-38.383
		c0-22.44-18.191-40.631-40.631-40.631s-40.631,18.191-40.631,40.631c0,14.258,8.99,26.616,16.305,38.383
		c4.955,7.97,6.838,12.618,5.164,18.478c-1.791,9.748-7.112,14.575-17.371,19.28c-14.361,6.585-45.329,19.903-49.857,49.898
		c-3.765,24.943-4.195,110.577-6.38,148.828c-0.474,8.292,5.996,15.337,14.299,15.571l0,0c7.695,0.217,12.792-6.543,13.602-14.198
		l6.911-91.281c0.647-3.095,5.203-2.624,5.203,0.538v94.274v197.429c0,10.128,8.211,18.339,18.339,18.339l0,0
		c9.579,0,17.545-7.373,18.285-16.924l13.579-175.387c0.121-1.575,1.337-2.362,2.552-2.362c1.215,0,2.43,0.787,2.553,2.362
		l13.578,175.387c0.74,9.551,8.706,16.924,18.285,16.924l0,0c10.129,0,18.34-8.211,18.34-18.339V321.749v-94.274
		c0-3.162,4.556-3.633,5.203-0.538l6.911,91.281c0.811,7.655,5.908,14.415,13.603,14.198
		C791.98,332.183,798.449,325.138,797.976,316.846z"></path>
	<polygon class="st0" points="467.592,283.46 332.407,283.46 332.407,259.098 293.155,307.823 332.407,356.549 332.407,332.186 
		467.592,332.186 467.592,356.549 506.845,307.823 467.592,259.098 	"></polygon>
</g>
</svg>

大量のコードがありますね。

この中から不要な記述を削除します。

どこからダウンロードしたか、またはダウンロードしたファイルによっては全て同じタグがあるとは限りません。ファイル毎にご確認ください。

最適化のポイント

  • 不要な属性（xmlns:a、x、y、enable-backgroundなど）を削除
  • XML宣言の不要な記述を削除
  • ただし、width、height、viewBoxなどの必須属性は残しておく

以上がポイントですので先程のファイルで見ていきましょう。

XML宣言の不要な記述を削除

svgタグの前にあるコメント（今回はillustratorでの生成情報）は不要です。

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

不要な属性を削除

<svg version="1.1" id="_x35_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 538.864" style="enable-background:new 0 0 800 538.864;" xml:space="preserve">

この中で

  • xmlns:xlink=”http://www.w3.org/1999/xlink”
  • x=”0px” y=”0px”
  • style=”enable-background:new 0 0 800 538.864;”
  • xml:space=”preserve”

は削除できます。

<svg version="1.1" id="_x35_" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 538.86">

最終的に上記のようになりました。

余談です。
昔、番号入り丸型アイコンを書き出して表示させていたところ、いくつかの画面幅だけで、微妙に見切れている状態になっていました。この失敗の原因はパッと見で縦横比を1/1と思い込んでaspect-ratio:1/1;を使って表示させていたことでした。svgタグの中身を確認すると微妙に1/1になっていないことがあります。稀なケースですが、いい勉強になりました。

HTMLでSVGを表示する4つの方法

1. imgタグを使う（最もシンプル）

<img src="image.svg" alt="説明文" width="300" height="300">

特徴:

  • 通常の画像と同じように簡単に表示できる
  • 単に「拡大してもボケない画像」として使いたい場合に最適
  • SVGの内部要素をCSSやJavaScriptで操作できない

この方法がわかりやすいと思います。わたしもよく使う方法です。

CSSやJavaScriptで操作できない点もありますが、例えば白黒の色を変更する程度であれば、imgタグにfilter: invert(1);を設定することで色反転でき、ホバーアクションとして使えると考えられます。デザインによって検討できる簡単な手法になりますね。

注意点:

  • SVGファイル内にwidth、height、viewBox属性を必ず指定する
  • レスポンシブにするには max-width: 100%; height: auto; をCSSで指定

2. CSSの背景画像として使う

.image {
  background-image: url("image01.svg");
}

特徴:

  • 背景画像としてSVGを表示できる

この部分も他の画像を扱うときと同様ですね。

3. HTMLとして埋め込むインラインSVG

この方法は、先ほど画像として書き出したファイルのsvgタグの部分をそのままHTMLファイルに書き出すものです。

特徴:

  • CSSやJavaScriptでSVGの要素を直接操作できる
  • 色の変更やアニメーションなどのインタラクティブな表現に最適
  • SVGファイルは不要（HTMLに直接記述）

svgタグに直接CSSなどで手を加えることができるため、依頼内容によっては、こちらの方が良い場合もあります。

注意点:

  • コード量が多いとHTMLの可読性が下がる
  • 最適化してから使用することをおすすめ
  • id属性は英数字のみを使用

個人的にはHTMLファイル全体が長くなるため、インラインはあまり好きではありません。

この後に紹介するSVGスプライトという方法であれば、コードが長くなることにも対処できるため、検討すると良いでしょう。

それでは歌舞伎のアイコンをダウンロードして

CSS適用前
CSS適用後

HTMLファイルにインラインで設置したSVGファイルをCSSで変化させてみました。

<p class="test">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.39 113.39">
<defs><style>.cls-1{fill:none;}.cls-2{fill:#040000;}</style></defs>
<title>アセット 289</title>
<g id="レイヤー_2" data-name="レイヤー 2"><g id="waku"><rect class="cls-1" width="113.39" height="113.39"/></g>
<g id="編集モード"><path class="cls-2" d="M24.13,52.65c-2.41,2-5.93.65-7.05-5.71v1.51c0,9.93,3.88,15.66,9.09,13,6.55-3.36,3.65-15.69,12.38-14.14a68.49,68.49,0,0,0,11.86.9h3.46l-.46-3.43c-1.29-9.56-6.5-14.3-10.64-16.59a25.09,25.09,0,0,0-19.62-1.48c-1.48-4.92-3.26-7,.52-16-7.61,6-8.34,14.89-4.27,22.22C25.41,43.7,26.54,50.68,24.13,52.65ZM39.84,33.46A14.45,14.45,0,0,1,46.63,42c-9.55-.73-17.11-4.23-21-9.74A19.09,19.09,0,0,1,39.84,33.46Z"/>
<path class="cls-2" d="M94,32.86c4.07-7.33,3.33-16.17-4.27-22.22,3.78,9,2,11.13.52,16a25.09,25.09,0,0,0-19.62,1.48c-4.14,2.29-9.36,7-10.64,16.59l-.46,3.43H63a68.49,68.49,0,0,0,11.86-.9c8.74-1.55,5.84,10.78,12.38,14.14,5.21,2.68,9.09-3,9.09-13V46.94c-1.12,6.36-4.65,7.68-7.05,5.71S88,43.7,94,32.86Zm-6.24-.61c-3.88,5.52-11.44,9-21,9.74a14.45,14.45,0,0,1,6.78-8.54A19.09,19.09,0,0,1,87.76,32.26Z"/>
<path class="cls-2" d="M56.69,76.54c-6.6,0-12.57,3-15.59,7.75l4.81,3.59c1.92-3,6.15-5,10.78-5s8.86,2,10.78,5l4.81-3.59C69.26,79.5,63.29,76.54,56.69,76.54Z"/>
<path class="cls-2" d="M85.42,72.06c-4.63-1.36-7.84-4.35-10.91-8.19-3.82-4.77-7.75-9.68-12.92-10.67l-.23,0c-.21,0-.43-.07-.64-.1a9.5,9.5,0,0,0-1-.06c1.76,0,3.38,5.59,3.38,7.92,0,1.75-.58,3.68-2.45,4.5a10,10,0,0,1-3.95.58,10,10,0,0,1-3.95-.58c-1.87-.82-2.45-2.75-2.45-4.5,0-2.33,1.62-7.92,3.38-7.92a9.5,9.5,0,0,0-1,.06c-.22,0-.43.06-.64.1l-.23,0c-5.16,1-9.1,5.89-12.92,10.67C35.8,67.71,32.59,70.7,28,72.06c-5.08,1.49-11-3.49-11-4.52v.3c.17,3.55,3.4,10.27,12.56,10.27,5.75,0,10-5.32,14.11-10.46a21.08,21.08,0,0,0,1.62-2.41A9.83,9.83,0,0,0,50.13,71a14.09,14.09,0,0,0,6.56,1.23h0A14.09,14.09,0,0,0,63.25,71a9.83,9.83,0,0,0,4.92-5.74,21.08,21.08,0,0,0,1.62,2.41c4.11,5.14,8.37,10.46,14.11,10.46,9.16,0,12.39-6.72,12.56-10.27v-.3C96.38,68.57,90.49,73.55,85.42,72.06Z"/>
<path class="cls-2" d="M46.77,98.83c4.19,2.71,6.5,3.22,9.92,3.22s5.73-.51,9.92-3.22l-9.94-8.12Z"/>
</g>
</g>
</svg>
</p>

上記SVGファイルはダウンロードしたままのもので最適化はしておりません。今回はCSSの部分だけとりあげます。

.test svg .cls-2 {
　stroke-width: 2px;
　stroke: black;
　fill: red;
}

設定したものは上記だけです。strokeは枠線に対して、fillは背景色に対して設定しています。

画像によって変わるため、クラス名がある場合（今回はcls-2）はそれに対して設定してください。

比較的簡単に設定できました。

ご依頼の内容やアニメーションの指定がある場合、インラインで埋め込んだほうが向いていますね。

SVGスプライト：複数のアイコンを効率よく使う方法

複数のSVGアイコンを一つのファイルにまとめて使う方法です。

<!-- スプライトの定義 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <!-- 歌舞伎アイコン -->
  <symbol id="icon-kabuki" viewBox="0 0 113.39 113.39">
    <path class="cls-2" d="M24.13,52.65c-2.41,2-5.93.65-7.05-5.71v1.51c0,9.93,3.88,15.66,9.09,13..." />
    <!-- 他のパスも同様に -->
  </symbol>
  
  <!-- だるまアイコン -->
  <symbol id="icon-daruma" viewBox="0 0 113.4 113.45">
    <path class="cls-2" d="M56.59,8.71c-26.55,0-48.06,21.52-48.06,48.06s21.52,48.06..." />
    <!-- 他のパスも同様に -->
  </symbol>
</svg>
<!-- スプライトの定義はここまででこれをひとつのSVGファイルにまとめる -->

<!-- そしてそれぞれを使用する場所において下記のように記述する -->
<svg class="svg-icon">
  <use xlink:href="sprite.svg#icon-kabuki"></use>
</svg>
  
<svg class="svg-icon">
  <use xlink:href="sprite.svg#icon-daruma"></use>
</svg>

スプライト定義は一つのSVGファイルのことです。そして、必要な箇所でuseタグを使って呼び出すイメージです。パスは普通の画像呼び出しと同じイメージです。

やっていることは、svgタグを一つにまとめ、それぞれのsvgタグをsymbolタグに変更することです。

そして一つにしたSVGファイル内の画像をidで呼び出すイメージです。大量にある場合はAIに作成してもらう方が楽です。

メリット:

  • HTTPリクエスト数を減らせる
  • CSSでアイコンの色やサイズをまとめて制御できる
  • 大量にアイコンがある場合は検討の価値あり

注意点:

  • IEでは外部ファイル化したSVGを参照できない場合がある

アクセシビリティへの配慮

  • <title> と <desc> タグで説明を追加
  • 適切な role 属性（role="img" など）を指定
  • aria-labelledby 属性で説明文と関連づける
<svg role="img" aria-labelledby="title desc">
  <title id="title">タイトル</title>
  <desc id="desc">詳細な説明</desc>
  <!-- SVGの内容 -->
</svg>

今回この記事をまとめる上で、自分もできていなかった点を調べ、勉強になりました。

SVGを使うときの注意点

向いていない用途

  • 高画質の写真などの複雑な画像（JPEGの方が適している）

以前はどのようにpngファイルとsvgファイルを使い分ければいいか悩んだときもありましたが、今はアイコンやテキストの多い、画像（資料やグラフ）などはsvgファイルで検討しています。

ブラウザ対応

  • IEに対してのサポートもWindows通常版では2022年6月でサポートされていませんし、考慮されなくても問題ないかなと考えています。もちろん案件によりますけどね。
  • 必要な場合は代替手段を用意する。画像であればpngファイルも用意しておく、もしくはご紹介していませんが、objectタグを使用するなど。

フォントの扱い

  • 文字データはアウトライン化（パスに変換）して、環境によるフォントの差異を防ぐと書かれているサイトもありますが、現実にはアウトライン化されずに画像として表示させてもフォントが変わっている場合もあります。
    その場合は、フォント指定をしたほうがいいです。

これを知らずになぜ画像のフォントが変わってるんだってあたふたした記憶があります。

まとめ

SVGは拡大しても劣化しない、軽量で、カスタマイズ性の高い画像形式です。ロゴ、アイコン、図表、グラフ、シンプルなイラストなどに最適です。

用途に合わせて適切な埋め込み方法を選び、最適化とアクセシビリティに配慮すれば、より使いやすく効果的なWebサイトが作れます。

わたしは初心者の頃は敬遠しておりましたが、そんな人がいなくなることを望んでおります。

まずは簡単なアイコンからSVGを使ってみてはいかがでしょうか？

コード

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
目次