SVGをCSSのクラスに埋め込む方法

svgをHTMLページに表示するにはsvgファイルを直接読み込ませる方法がよく使われますが、svgをCSSで定義しているクラスへ直接埋め込むことも可能です。

今回はSVGをCSSへ埋め込む方法を紹介していきます。

[スポンサーリンク]

SVGへ変換する画像

さっそくですが、まずはpng画像をsvgへ変換していきましょう。

今回はこちらの画像を使ってsvgへ変換していきます。

昔のアニメの主人公をモチーフに描いてみました。モチーフというかそのまま感が強いですがw

pngからsvgへ変換

pngからsvgへ変換するにはツールを使っていく必要があります。

こちらのサイトからお気に入りのツールをみつけてください。

オススメは2番目の「PicSvg」です。簡単だし色も変更できて便利です。

svgを開いてみる

では、先程のツールでダウンロードできたsvgをまずは開いてみましょう。

おそらくこんな感じになっていると思います。長くてすみません。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1959 2546 c-15 -14 -270 -59 -464 -82 -254 -29 -434 -28 -537 3 -60
18 -156 14 -276 -12 -40 -8 -102 -15 -137 -15 -35 0 -67 -5 -70 -11 -19 -30
53 -32 212 -4 166 28 211 30 268 11 22 -7 92 -16 155 -19 175 -9 705 47 799
85 45 18 259 27 391 17 69 -5 181 -22 250 -37 l124 -27 18 -49 c9 -27 35 -70
57 -96 28 -34 41 -58 41 -79 0 -16 -16 -108 -35 -203 -19 -95 -41 -227 -50
-293 -26 -184 -62 -355 -106 -493 -84 -266 -124 -503 -139 -837 -8 -188 -4
-223 23 -197 8 9 14 77 19 230 9 308 42 509 127 780 52 165 76 268 96 422 9
69 33 211 52 315 19 105 37 216 40 247 5 55 4 58 -41 115 -25 33 -53 80 -62
105 -8 26 -22 49 -30 52 -24 9 -234 55 -304 66 -61 9 -412 15 -421 6z"/>
<path d="M396 2380 c-33 -10 -62 -24 -67 -31 -4 -7 -10 -36 -14 -65 -4 -32
-22 -84 -46 -129 -21 -42 -39 -82 -39 -89 0 -8 -13 -45 -30 -84 -49 -116 -60
-210 -60 -521 0 -207 4 -300 16 -371 12 -72 16 -156 15 -345 -2 -258 -9 -350
-36 -424 -16 -45 -12 -85 7 -79 18 6 47 136 59 266 14 153 6 472 -15 597 -12
67 -16 160 -16 365 1 313 9 378 65 527 20 54 41 110 47 125 5 15 21 41 34 59
15 21 24 46 24 70 0 77 22 96 125 111 23 4 27 32 5 35 -8 1 -42 -6 -74 -17z"/>
<path d="M1262 2318 c-7 -39 -8 -66 -2 -72 10 -10 12 -5 29 59 14 54 14 75 -2
75 -9 0 -18 -23 -25 -62z"/>
<path d="M936 2331 c-7 -11 21 -110 35 -125 14 -16 10 -26 -8 -26 -40 0 -147
-63 -210 -122 -92 -89 -106 -120 -101 -227 2 -73 8 -97 36 -153 61 -125 204
-250 310 -273 17 -3 32 -13 32 -20 0 -7 12 -23 28 -34 l27 -20 -50 -1 c-58 0
-235 44 -385 96 -65 22 -141 40 -201 47 -87 10 -98 9 -134 -9 -52 -26 -75 -72
-75 -150 0 -53 5 -69 32 -110 60 -87 170 -121 412 -126 80 -2 146 -4 146 -5 0
-10 -190 -95 -229 -104 -54 -11 -69 -29 -43 -52 28 -25 70 -37 132 -37 53 0
63 -4 121 -47 35 -25 134 -114 219 -197 124 -121 169 -158 222 -184 128 -63
246 -54 423 33 103 50 147 89 242 215 224 294 214 278 234 378 7 32 9 74 5 95
-12 63 -29 64 -182 6 -74 -28 -174 -61 -222 -74 -130 -35 -436 -102 -527 -115
-44 -7 -125 -20 -181 -31 -164 -31 -253 -40 -276 -28 -14 8 -23 8 -31 0 -13
-13 -93 -13 -122 -1 -17 7 -16 9 10 9 36 1 104 32 199 89 l68 42 117 1 c122 0
186 14 186 39 0 13 -48 16 -350 21 -325 5 -355 7 -416 27 -50 17 -76 32 -104
63 -36 40 -37 44 -33 100 3 39 11 65 24 80 17 20 26 21 109 16 69 -4 118 -14
210 -45 66 -22 170 -52 230 -67 117 -29 124 -29 391 -6 110 9 195 40 245 87
15 14 48 31 75 38 52 13 69 34 34 43 l-21 6 25 26 c28 29 86 135 86 157 0 8 5
14 10 14 6 0 10 -10 10 -22 0 -35 47 -129 83 -166 18 -19 48 -42 67 -52 37
-19 166 -49 217 -51 l28 -1 -31 -7 c-40 -10 -54 -19 -54 -36 0 -25 20 -27 75
-6 102 38 170 79 267 160 115 97 148 135 190 219 51 102 48 209 -7 290 l-24
35 34 39 c33 36 45 68 27 68 -5 0 -23 -20 -42 -45 l-33 -44 -30 25 c-82 69
-213 109 -327 101 -42 -3 -84 -9 -93 -13 -15 -5 -17 2 -17 56 0 53 -2 61 -17
58 -15 -3 -18 -14 -18 -65 l0 -62 -48 -21 c-66 -30 -161 -95 -192 -132 -14
-17 -27 -29 -29 -27 -1 2 -8 19 -15 36 -17 43 -53 77 -121 117 -70 41 -131 62
-240 81 -71 13 -108 14 -218 4 -74 -6 -137 -8 -140 -4 -4 4 -16 34 -27 68 -19
59 -36 79 -49 58z m489 -188 c134 -30 254 -109 271 -179 8 -32 -2 -158 -17
-222 -20 -79 -63 -164 -116 -227 -47 -56 -57 -63 -149 -97 -188 -71 -259 -81
-310 -43 -17 13 -14 14 33 8 35 -4 58 -2 67 6 28 24 6 38 -67 45 -195 18 -324
105 -406 271 -26 52 -31 74 -31 134 0 42 6 83 14 99 20 38 124 136 172 160
131 67 358 86 539 45z m910 -34 c122 -45 192 -117 215 -220 11 -49 10 -63 -5
-108 -33 -100 -100 -180 -255 -302 -63 -50 -140 -91 -140 -75 0 9 -23 15 -72
19 -134 12 -220 49 -265 115 -67 100 -90 291 -45 379 47 91 218 195 347 211
87 11 155 5 220 -19z m-598 -181 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4
-12 1 -19z m-17 -218 c0 -11 -4 -20 -10 -20 -5 0 -10 9 -10 20 0 11 5 20 10
20 6 0 10 -9 10 -20z m-140 -250 c0 -5 -7 -10 -16 -10 -8 0 -12 5 -9 10 3 6
10 10 16 10 5 0 9 -4 9 -10z m-497 -50 c8 0 7 -4 -1 -12 -9 -9 -16 -8 -30 6
-16 18 -16 19 1 12 10 -3 24 -6 30 -6z m383 -18 c-10 -16 -130 -60 -175 -65
-23 -2 -39 -2 -37 0 2 3 48 20 101 38 54 19 100 37 103 40 8 8 15 -2 8 -13z
m-331 -58 c22 -9 0 -24 -35 -24 -24 1 -24 1 -6 15 23 17 20 17 41 9z m975
-197 c0 -52 -27 -131 -63 -181 -214 -302 -275 -369 -388 -426 -157 -80 -262
-90 -374 -37 l-70 34 35 22 c19 11 59 29 88 38 48 16 55 16 63 2 23 -42 48
-64 59 -53 9 9 8 19 -4 42 -9 17 -16 33 -16 37 0 3 37 5 83 5 60 0 94 -6 126
-20 52 -24 51 -24 51 -5 0 33 -60 50 -180 51 -63 1 -119 -2 -125 -6 -5 -4 -35
-15 -65 -25 -30 -10 -73 -30 -96 -45 l-41 -27 -175 173 -176 174 41 0 c23 0
85 9 137 19 52 11 96 18 98 16 2 -1 -18 -33 -43 -70 -26 -37 -44 -73 -41 -80
6 -17 58 -25 168 -27 108 -2 113 2 164 126 l38 93 125 27 c185 40 353 90 461
135 52 22 101 40 108 41 7 0 12 -13 12 -33z m-1239 -46 c-8 -5 -20 -7 -28 -4
-21 8 -15 13 15 13 20 0 23 -3 13 -9z m465 -208 c-46 -114 -34 -107 -148 -100
-55 3 -102 8 -105 10 -3 3 4 15 15 27 19 21 46 69 56 103 4 13 17 17 53 18 38
1 118 10 154 18 3 0 -8 -34 -25 -76z m-510 -2 c0 -16 -3 -18 -20 -9 -20 11
-20 11 -1 19 11 4 20 8 20 8 1 1 1 -8 1 -18z"/>
<path d="M1270 1975 c0 -8 11 -17 25 -21 69 -17 98 -117 52 -185 -38 -56 -81
-79 -151 -79 -105 1 -176 47 -176 117 0 80 30 105 135 113 53 4 70 9 70 20 0
25 -105 25 -159 1 -57 -25 -80 -60 -80 -125 -1 -93 72 -154 197 -163 54 -4 69
-1 117 24 44 23 60 39 82 82 33 64 36 122 8 168 -30 50 -120 86 -120 48z"/>
<path d="M1965 1933 c-62 -15 -135 -118 -135 -191 0 -85 72 -137 191 -136 87
0 150 25 194 76 42 50 52 92 32 140 -34 82 -174 137 -282 111z m185 -60 c81
-58 88 -117 22 -183 -31 -31 -48 -39 -106 -49 -58 -10 -75 -10 -117 4 -54 18
-89 54 -89 92 0 54 56 142 105 164 11 5 48 7 83 4 48 -3 72 -11 102 -32z"/>
<path d="M1751 943 c-11 -38 -21 -77 -23 -88 -4 -24 -56 -31 -154 -20 l-60 6
33 36 c27 28 73 104 73 120 0 2 -7 3 -15 3 -8 0 -27 -19 -43 -42 -17 -24 -42
-54 -57 -68 -40 -38 -48 -56 -29 -74 20 -21 255 -24 272 -3 11 13 52 158 52
182 0 8 -7 15 -15 15 -9 0 -21 -24 -34 -67z"/>
<path d="M1670 2303 c0 -9 -20 -43 -45 -74 -25 -32 -45 -62 -45 -68 0 -6 12
-11 28 -11 20 0 23 3 13 9 -12 8 -8 18 21 53 57 70 72 108 43 108 -8 0 -15 -8
-15 -17z"/>
<path d="M2392 2227 c-24 -57 -27 -77 -12 -77 11 0 60 96 60 118 0 30 -27 7
-48 -41z"/>
</g>
</svg>

上記のsvgはそのままではCSSへ定義することができません。

base64エンコードする必要があります。

こちらのツールを使ってbase64へエンコードしていきましょう。

エンコードするとこんな感じの文字列になります。

PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMzAwLjAwMDAwMHB0IiBoZWlnaHQ9IjMwMC4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDMwMC4wMDAwMDAgMzAwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8bWV0YWRhdGE+CkNyZWF0ZWQgYnkgcG90cmFjZSAxLjEwLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMQo8L21ldGFkYXRhPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwzMDAuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNMTk1OSAyNTQ2IGMtMTUgLTE0IC0yNzAgLTU5IC00NjQgLTgyIC0yNTQgLTI5IC00MzQgLTI4IC01MzcgMyAtNjAKMTggLTE1NiAxNCAtMjc2IC0xMiAtNDAgLTggLTEwMiAtMTUgLTEzNyAtMTUgLTM1IDAgLTY3IC01IC03MCAtMTEgLTE5IC0zMAo1MyAtMzIgMjEyIC00IDE2NiAyOCAyMTEgMzAgMjY4IDExIDIyIC03IDkyIC0xNiAxNTUgLTE5IDE3NSAtOSA3MDUgNDcgNzk5Cjg1IDQ1IDE4IDI1OSAyNyAzOTEgMTcgNjkgLTUgMTgxIC0yMiAyNTAgLTM3IGwxMjQgLTI3IDE4IC00OSBjOSAtMjcgMzUgLTcwCjU3IC05NiAyOCAtMzQgNDEgLTU4IDQxIC03OSAwIC0xNiAtMTYgLTEwOCAtMzUgLTIwMyAtMTkgLTk1IC00MSAtMjI3IC01MAotMjkzIC0yNiAtMTg0IC02MiAtMzU1IC0xMDYgLTQ5MyAtODQgLTI2NiAtMTI0IC01MDMgLTEzOSAtODM3IC04IC0xODggLTQKLTIyMyAyMyAtMTk3IDggOSAxNCA3NyAxOSAyMzAgOSAzMDggNDIgNTA5IDEyNyA3ODAgNTIgMTY1IDc2IDI2OCA5NiA0MjIgOQo2OSAzMyAyMTEgNTIgMzE1IDE5IDEwNSAzNyAyMTYgNDAgMjQ3IDUgNTUgNCA1OCAtNDEgMTE1IC0yNSAzMyAtNTMgODAgLTYyCjEwNSAtOCAyNiAtMjIgNDkgLTMwIDUyIC0yNCA5IC0yMzQgNTUgLTMwNCA2NiAtNjEgOSAtNDEyIDE1IC00MjEgNnoiLz4KPHBhdGggZD0iTTM5NiAyMzgwIGMtMzMgLTEwIC02MiAtMjQgLTY3IC0zMSAtNCAtNyAtMTAgLTM2IC0xNCAtNjUgLTQgLTMyCi0yMiAtODQgLTQ2IC0xMjkgLTIxIC00MiAtMzkgLTgyIC0zOSAtODkgMCAtOCAtMTMgLTQ1IC0zMCAtODQgLTQ5IC0xMTYgLTYwCi0yMTAgLTYwIC01MjEgMCAtMjA3IDQgLTMwMCAxNiAtMzcxIDEyIC03MiAxNiAtMTU2IDE1IC0zNDUgLTIgLTI1OCAtOSAtMzUwCi0zNiAtNDI0IC0xNiAtNDUgLTEyIC04NSA3IC03OSAxOCA2IDQ3IDEzNiA1OSAyNjYgMTQgMTUzIDYgNDcyIC0xNSA1OTcgLTEyCjY3IC0xNiAxNjAgLTE2IDM2NSAxIDMxMyA5IDM3OCA2NSA1MjcgMjAgNTQgNDEgMTEwIDQ3IDEyNSA1IDE1IDIxIDQxIDM0IDU5CjE1IDIxIDI0IDQ2IDI0IDcwIDAgNzcgMjIgOTYgMTI1IDExMSAyMyA0IDI3IDMyIDUgMzUgLTggMSAtNDIgLTYgLTc0IC0xN3oiLz4KPHBhdGggZD0iTTEyNjIgMjMxOCBjLTcgLTM5IC04IC02NiAtMiAtNzIgMTAgLTEwIDEyIC01IDI5IDU5IDE0IDU0IDE0IDc1IC0yCjc1IC05IDAgLTE4IC0yMyAtMjUgLTYyeiIvPgo8cGF0aCBkPSJNOTM2IDIzMzEgYy03IC0xMSAyMSAtMTEwIDM1IC0xMjUgMTQgLTE2IDEwIC0yNiAtOCAtMjYgLTQwIDAgLTE0NwotNjMgLTIxMCAtMTIyIC05MiAtODkgLTEwNiAtMTIwIC0xMDEgLTIyNyAyIC03MyA4IC05NyAzNiAtMTUzIDYxIC0xMjUgMjA0Ci0yNTAgMzEwIC0yNzMgMTcgLTMgMzIgLTEzIDMyIC0yMCAwIC03IDEyIC0yMyAyOCAtMzQgbDI3IC0yMCAtNTAgLTEgYy01OCAwCi0yMzUgNDQgLTM4NSA5NiAtNjUgMjIgLTE0MSA0MCAtMjAxIDQ3IC04NyAxMCAtOTggOSAtMTM0IC05IC01MiAtMjYgLTc1IC03MgotNzUgLTE1MCAwIC01MyA1IC02OSAzMiAtMTEwIDYwIC04NyAxNzAgLTEyMSA0MTIgLTEyNiA4MCAtMiAxNDYgLTQgMTQ2IC01IDAKLTEwIC0xOTAgLTk1IC0yMjkgLTEwNCAtNTQgLTExIC02OSAtMjkgLTQzIC01MiAyOCAtMjUgNzAgLTM3IDEzMiAtMzcgNTMgMAo2MyAtNCAxMjEgLTQ3IDM1IC0yNSAxMzQgLTExNCAyMTkgLTE5NyAxMjQgLTEyMSAxNjkgLTE1OCAyMjIgLTE4NCAxMjggLTYzCjI0NiAtNTQgNDIzIDMzIDEwMyA1MCAxNDcgODkgMjQyIDIxNSAyMjQgMjk0IDIxNCAyNzggMjM0IDM3OCA3IDMyIDkgNzQgNSA5NQotMTIgNjMgLTI5IDY0IC0xODIgNiAtNzQgLTI4IC0xNzQgLTYxIC0yMjIgLTc0IC0xMzAgLTM1IC00MzYgLTEwMiAtNTI3IC0xMTUKLTQ0IC03IC0xMjUgLTIwIC0xODEgLTMxIC0xNjQgLTMxIC0yNTMgLTQwIC0yNzYgLTI4IC0xNCA4IC0yMyA4IC0zMSAwIC0xMwotMTMgLTkzIC0xMyAtMTIyIC0xIC0xNyA3IC0xNiA5IDEwIDkgMzYgMSAxMDQgMzIgMTk5IDg5IGw2OCA0MiAxMTcgMSBjMTIyIDAKMTg2IDE0IDE4NiAzOSAwIDEzIC00OCAxNiAtMzUwIDIxIC0zMjUgNSAtMzU1IDcgLTQxNiAyNyAtNTAgMTcgLTc2IDMyIC0xMDQKNjMgLTM2IDQwIC0zNyA0NCAtMzMgMTAwIDMgMzkgMTEgNjUgMjQgODAgMTcgMjAgMjYgMjEgMTA5IDE2IDY5IC00IDExOCAtMTQKMjEwIC00NSA2NiAtMjIgMTcwIC01MiAyMzAgLTY3IDExNyAtMjkgMTI0IC0yOSAzOTEgLTYgMTEwIDkgMTk1IDQwIDI0NSA4NwoxNSAxNCA0OCAzMSA3NSAzOCA1MiAxMyA2OSAzNCAzNCA0MyBsLTIxIDYgMjUgMjYgYzI4IDI5IDg2IDEzNSA4NiAxNTcgMCA4IDUKMTQgMTAgMTQgNiAwIDEwIC0xMCAxMCAtMjIgMCAtMzUgNDcgLTEyOSA4MyAtMTY2IDE4IC0xOSA0OCAtNDIgNjcgLTUyIDM3Ci0xOSAxNjYgLTQ5IDIxNyAtNTEgbDI4IC0xIC0zMSAtNyBjLTQwIC0xMCAtNTQgLTE5IC01NCAtMzYgMCAtMjUgMjAgLTI3IDc1Ci02IDEwMiAzOCAxNzAgNzkgMjY3IDE2MCAxMTUgOTcgMTQ4IDEzNSAxOTAgMjE5IDUxIDEwMiA0OCAyMDkgLTcgMjkwIGwtMjQKMzUgMzQgMzkgYzMzIDM2IDQ1IDY4IDI3IDY4IC01IDAgLTIzIC0yMCAtNDIgLTQ1IGwtMzMgLTQ0IC0zMCAyNSBjLTgyIDY5Ci0yMTMgMTA5IC0zMjcgMTAxIC00MiAtMyAtODQgLTkgLTkzIC0xMyAtMTUgLTUgLTE3IDIgLTE3IDU2IDAgNTMgLTIgNjEgLTE3CjU4IC0xNSAtMyAtMTggLTE0IC0xOCAtNjUgbDAgLTYyIC00OCAtMjEgYy02NiAtMzAgLTE2MSAtOTUgLTE5MiAtMTMyIC0xNAotMTcgLTI3IC0yOSAtMjkgLTI3IC0xIDIgLTggMTkgLTE1IDM2IC0xNyA0MyAtNTMgNzcgLTEyMSAxMTcgLTcwIDQxIC0xMzEgNjIKLTI0MCA4MSAtNzEgMTMgLTEwOCAxNCAtMjE4IDQgLTc0IC02IC0xMzcgLTggLTE0MCAtNCAtNCA0IC0xNiAzNCAtMjcgNjggLTE5CjU5IC0zNiA3OSAtNDkgNTh6IG00ODkgLTE4OCBjMTM0IC0zMCAyNTQgLTEwOSAyNzEgLTE3OSA4IC0zMiAtMiAtMTU4IC0xNwotMjIyIC0yMCAtNzkgLTYzIC0xNjQgLTExNiAtMjI3IC00NyAtNTYgLTU3IC02MyAtMTQ5IC05NyAtMTg4IC03MSAtMjU5IC04MQotMzEwIC00MyAtMTcgMTMgLTE0IDE0IDMzIDggMzUgLTQgNTggLTIgNjcgNiAyOCAyNCA2IDM4IC02NyA0NSAtMTk1IDE4IC0zMjQKMTA1IC00MDYgMjcxIC0yNiA1MiAtMzEgNzQgLTMxIDEzNCAwIDQyIDYgODMgMTQgOTkgMjAgMzggMTI0IDEzNiAxNzIgMTYwCjEzMSA2NyAzNTggODYgNTM5IDQ1eiBtOTEwIC0zNCBjMTIyIC00NSAxOTIgLTExNyAyMTUgLTIyMCAxMSAtNDkgMTAgLTYzIC01Ci0xMDggLTMzIC0xMDAgLTEwMCAtMTgwIC0yNTUgLTMwMiAtNjMgLTUwIC0xNDAgLTkxIC0xNDAgLTc1IDAgOSAtMjMgMTUgLTcyCjE5IC0xMzQgMTIgLTIyMCA0OSAtMjY1IDExNSAtNjcgMTAwIC05MCAyOTEgLTQ1IDM3OSA0NyA5MSAyMTggMTk1IDM0NyAyMTEKODcgMTEgMTU1IDUgMjIwIC0xOXogbS01OTggLTE4MSBjLTMgLTggLTYgLTUgLTYgNiAtMSAxMSAyIDE3IDUgMTMgMyAtMyA0Ci0xMiAxIC0xOXogbS0xNyAtMjE4IGMwIC0xMSAtNCAtMjAgLTEwIC0yMCAtNSAwIC0xMCA5IC0xMCAyMCAwIDExIDUgMjAgMTAKMjAgNiAwIDEwIC05IDEwIC0yMHogbS0xNDAgLTI1MCBjMCAtNSAtNyAtMTAgLTE2IC0xMCAtOCAwIC0xMiA1IC05IDEwIDMgNgoxMCAxMCAxNiAxMCA1IDAgOSAtNCA5IC0xMHogbS00OTcgLTUwIGM4IDAgNyAtNCAtMSAtMTIgLTkgLTkgLTE2IC04IC0zMCA2Ci0xNiAxOCAtMTYgMTkgMSAxMiAxMCAtMyAyNCAtNiAzMCAtNnogbTM4MyAtMTggYy0xMCAtMTYgLTEzMCAtNjAgLTE3NSAtNjUKLTIzIC0yIC0zOSAtMiAtMzcgMCAyIDMgNDggMjAgMTAxIDM4IDU0IDE5IDEwMCAzNyAxMDMgNDAgOCA4IDE1IC0yIDggLTEzegptLTMzMSAtNTggYzIyIC05IDAgLTI0IC0zNSAtMjQgLTI0IDEgLTI0IDEgLTYgMTUgMjMgMTcgMjAgMTcgNDEgOXogbTk3NQotMTk3IGMwIC01MiAtMjcgLTEzMSAtNjMgLTE4MSAtMjE0IC0zMDIgLTI3NSAtMzY5IC0zODggLTQyNiAtMTU3IC04MCAtMjYyCi05MCAtMzc0IC0zNyBsLTcwIDM0IDM1IDIyIGMxOSAxMSA1OSAyOSA4OCAzOCA0OCAxNiA1NSAxNiA2MyAyIDIzIC00MiA0OAotNjQgNTkgLTUzIDkgOSA4IDE5IC00IDQyIC05IDE3IC0xNiAzMyAtMTYgMzcgMCAzIDM3IDUgODMgNSA2MCAwIDk0IC02IDEyNgotMjAgNTIgLTI0IDUxIC0yNCA1MSAtNSAwIDMzIC02MCA1MCAtMTgwIDUxIC02MyAxIC0xMTkgLTIgLTEyNSAtNiAtNSAtNCAtMzUKLTE1IC02NSAtMjUgLTMwIC0xMCAtNzMgLTMwIC05NiAtNDUgbC00MSAtMjcgLTE3NSAxNzMgLTE3NiAxNzQgNDEgMCBjMjMgMAo4NSA5IDEzNyAxOSA1MiAxMSA5NiAxOCA5OCAxNiAyIC0xIC0xOCAtMzMgLTQzIC03MCAtMjYgLTM3IC00NCAtNzMgLTQxIC04MAo2IC0xNyA1OCAtMjUgMTY4IC0yNyAxMDggLTIgMTEzIDIgMTY0IDEyNiBsMzggOTMgMTI1IDI3IGMxODUgNDAgMzUzIDkwIDQ2MQoxMzUgNTIgMjIgMTAxIDQwIDEwOCA0MSA3IDAgMTIgLTEzIDEyIC0zM3ogbS0xMjM5IC00NiBjLTggLTUgLTIwIC03IC0yOCAtNAotMjEgOCAtMTUgMTMgMTUgMTMgMjAgMCAyMyAtMyAxMyAtOXogbTQ2NSAtMjA4IGMtNDYgLTExNCAtMzQgLTEwNyAtMTQ4IC0xMDAKLTU1IDMgLTEwMiA4IC0xMDUgMTAgLTMgMyA0IDE1IDE1IDI3IDE5IDIxIDQ2IDY5IDU2IDEwMyA0IDEzIDE3IDE3IDUzIDE4IDM4CjEgMTE4IDEwIDE1NCAxOCAzIDAgLTggLTM0IC0yNSAtNzZ6IG0tNTEwIC0yIGMwIC0xNiAtMyAtMTggLTIwIC05IC0yMCAxMQotMjAgMTEgLTEgMTkgMTEgNCAyMCA4IDIwIDggMSAxIDEgLTggMSAtMTh6Ii8+CjxwYXRoIGQ9Ik0xMjcwIDE5NzUgYzAgLTggMTEgLTE3IDI1IC0yMSA2OSAtMTcgOTggLTExNyA1MiAtMTg1IC0zOCAtNTYgLTgxCi03OSAtMTUxIC03OSAtMTA1IDEgLTE3NiA0NyAtMTc2IDExNyAwIDgwIDMwIDEwNSAxMzUgMTEzIDUzIDQgNzAgOSA3MCAyMCAwCjI1IC0xMDUgMjUgLTE1OSAxIC01NyAtMjUgLTgwIC02MCAtODAgLTEyNSAtMSAtOTMgNzIgLTE1NCAxOTcgLTE2MyA1NCAtNCA2OQotMSAxMTcgMjQgNDQgMjMgNjAgMzkgODIgODIgMzMgNjQgMzYgMTIyIDggMTY4IC0zMCA1MCAtMTIwIDg2IC0xMjAgNDh6Ii8+CjxwYXRoIGQ9Ik0xOTY1IDE5MzMgYy02MiAtMTUgLTEzNSAtMTE4IC0xMzUgLTE5MSAwIC04NSA3MiAtMTM3IDE5MSAtMTM2IDg3CjAgMTUwIDI1IDE5NCA3NiA0MiA1MCA1MiA5MiAzMiAxNDAgLTM0IDgyIC0xNzQgMTM3IC0yODIgMTExeiBtMTg1IC02MCBjODEKLTU4IDg4IC0xMTcgMjIgLTE4MyAtMzEgLTMxIC00OCAtMzkgLTEwNiAtNDkgLTU4IC0xMCAtNzUgLTEwIC0xMTcgNCAtNTQgMTgKLTg5IDU0IC04OSA5MiAwIDU0IDU2IDE0MiAxMDUgMTY0IDExIDUgNDggNyA4MyA0IDQ4IC0zIDcyIC0xMSAxMDIgLTMyeiIvPgo8cGF0aCBkPSJNMTc1MSA5NDMgYy0xMSAtMzggLTIxIC03NyAtMjMgLTg4IC00IC0yNCAtNTYgLTMxIC0xNTQgLTIwIGwtNjAgNgozMyAzNiBjMjcgMjggNzMgMTA0IDczIDEyMCAwIDIgLTcgMyAtMTUgMyAtOCAwIC0yNyAtMTkgLTQzIC00MiAtMTcgLTI0IC00MgotNTQgLTU3IC02OCAtNDAgLTM4IC00OCAtNTYgLTI5IC03NCAyMCAtMjEgMjU1IC0yNCAyNzIgLTMgMTEgMTMgNTIgMTU4IDUyCjE4MiAwIDggLTcgMTUgLTE1IDE1IC05IDAgLTIxIC0yNCAtMzQgLTY3eiIvPgo8cGF0aCBkPSJNMTY3MCAyMzAzIGMwIC05IC0yMCAtNDMgLTQ1IC03NCAtMjUgLTMyIC00NSAtNjIgLTQ1IC02OCAwIC02IDEyCi0xMSAyOCAtMTEgMjAgMCAyMyAzIDEzIDkgLTEyIDggLTggMTggMjEgNTMgNTcgNzAgNzIgMTA4IDQzIDEwOCAtOCAwIC0xNSAtOAotMTUgLTE3eiIvPgo8cGF0aCBkPSJNMjM5MiAyMjI3IGMtMjQgLTU3IC0yNyAtNzcgLTEyIC03NyAxMSAwIDYwIDk2IDYwIDExOCAwIDMwIC0yNyA3Ci00OCAtNDF6Ii8+CjwvZz4KPC9zdmc+Cg==

CSSにsvgを埋め込む

XXXXXの部分へbase64エンコードしたsvgを埋め込んでいきます。

.your-class {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image:url("data:image/svg+xml;base64,XXXXX");
}

実際に埋め込んでみたのがコチラ!

See the Pen SVG-sponge-bob by morinkey (@morinkey) on CodePen.

これでsvgをCSSへ埋め込む手順は完了です!

小憎らしいボブの顔が表示されるはずです。

もちろん高さ、幅を好きに変更することも可能ですし、その他指定したいプロパティも追加することも可能です。

さいごに

ちょっとしたサンプルなどを作る時にCSSファイル以外は無駄に持たせたくないという時に、この技を使えばファイルの軽量化につながると思います。

ちなみに、codepenを使う場合にはsvgファイルをアップできないのでこの方法を使ってsvgを表示させています。

今のところ使いみちとしてはそれ以外にはありませんね。

codepenでsvgを使われるという方にはオススメしたい技です。

それでは!