SVGをダークモードに対応させる
Web
2024年8月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、SVGで図形を描いて、ダークモードで色が変わるようにしてみたいと思います。
SVGを用意する
まずはSVGを用意します。
AdobeのIllustratorで化学式を描いてみました。
ご存知「安息香酸」です。
「多角形ツール」で正六角形を描く→斜線を4本描く→文字を描く→「書式」→「アウトラインを作成」→「別名で保存」→SVG、です。
こういう化学式って本当は線の太さとか長さとか「美しい」とされる比率があるんでしょうが、そのへんはテキトーです。
SVGをDreamWeaverで開いてみるとSVGコードがわかるので、<svg>から</svg>までをコピーしてHTMLに貼りつけます。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 2000 1000" style="enable-background:new 0 0 2000 1000;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000;stroke-width:10;stroke-miterlimit:10;}
</style>
<polygon class="st0" points="709.3,242 466.1,382.4 466.1,663.2 709.3,803.6 952.5,663.2 952.5,382.4"/>
<line class="st0" x1="952.7" y1="382.3" x2="1112.1" y2="290.3"/>
<line class="st0" x1="518.7" y1="411.3" x2="710.7" y2="301.3"/>
<line class="st0" x1="902.7" y1="633.3" x2="902.7" y2="411.3"/>
<line class="st0" x1="710.7" y1="744.3" x2="518.7" y2="633.3"/>
<path d="M1225.2,207.1c7.5,7.2,11.7,15.3,12.5,24.5h-14.2c-1.6-6.9-4.8-12.4-9.6-16.5c-4.8-4.1-11.6-6.1-20.3-6.1 c-10.6,0-19.2,3.7-25.7,11.2c-6.5,7.4-9.8,18.9-9.8,34.2c0,12.6,2.9,22.8,8.8,30.7c5.9,7.8,14.7,11.8,26.3,11.8 c10.7,0,18.9-4.1,24.5-12.4c3-4.3,5.2-10.1,6.7-17.1h14.2c-1.3,11.3-5.5,20.8-12.6,28.5c-8.5,9.2-20.1,13.8-34.6,13.8 c-12.5,0-23-3.8-31.5-11.4c-11.2-10-16.8-25.5-16.8-46.4c0-15.9,4.2-28.9,12.6-39c9.1-11,21.6-16.6,37.6-16.6 C1207.1,196.4,1217.7,199.9,1225.2,207.1z"/>
<path d="M1345.1,214.7c7.1,9.5,10.7,21.7,10.7,36.5c0,16.1-4.1,29.4-12.2,40.1c-9.6,12.5-23.2,18.8-40.9,18.8 c-16.6,0-29.6-5.5-39-16.4c-8.4-10.5-12.7-23.9-12.7-40c0-14.5,3.6-27,10.8-37.4c9.3-13.3,23-19.9,41.2-19.9 C1321.9,196.4,1335.9,202.5,1345.1,214.7z M1332.2,283.2c5.7-9.2,8.6-19.8,8.6-31.8c0-12.6-3.3-22.8-9.9-30.5 c-6.6-7.7-15.7-11.6-27.1-11.6c-11.1,0-20.2,3.8-27.2,11.5c-7,7.6-10.5,18.9-10.5,33.8c0,11.9,3,22,9,30.1 c6,8.2,15.8,12.3,29.3,12.3C1317.2,297,1326.5,292.4,1332.2,283.2z"/>
<path d="M1448.5,199.3h14.7v44.5h56v-44.5h14.7v107.6h-14.7v-50.3h-56v50.3h-14.7V199.3z"/>
<path d="M1372.4,320.9c2.7-5.6,8-10.6,15.8-15.2l11.7-6.8c5.2-3.1,8.9-5.7,11-7.8c3.3-3.4,5-7.2,5-11.6c0-5.1-1.5-9.1-4.6-12.1 c-3.1-3-7.1-4.5-12.2-4.5c-7.5,0-12.7,2.8-15.6,8.5c-1.5,3.1-2.4,7.3-2.6,12.7h-11.2c0.1-7.6,1.5-13.8,4.2-18.6 c4.8-8.5,13.2-12.7,25.2-12.7c10,0,17.3,2.7,21.9,8.1c4.6,5.4,6.9,11.4,6.9,18.1c0,7-2.5,13-7.4,17.9c-2.8,2.9-8,6.4-15.3,10.5 l-8.4,4.6c-4,2.2-7.1,4.3-9.4,6.3c-4.1,3.5-6.6,7.5-7.7,11.8h47.7v10.4h-60C1368.1,333,1369.7,326.5,1372.4,320.9z"/>
</svg>こういうのを「インラインSVG」というらしいです。
<polygon>が六角形、4つある<line>が線、4つある<path>が上からC、O、H、2を表しているのだと思います。
ダークモードに対応
さっきのインラインSVGの<style>と</style>の間にスタイルを書いていきます。
<polygon>と<line>にline、<path>にpathというクラスを付与しておきます。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 2000 1000" style="enable-background:new 0 0 2000 1000;" xml:space="preserve">
<style type="text/css">
.line {
fill:none;
stroke:#000;
stroke-width:10;
stroke-miterlimit:10;
}
.path {
fill:#000;
}
@media(prefers-color-scheme: light) {
.line {
fill:none;
stroke:#000;
stroke-width:10;
stroke-miterlimit:10;
}
.path {
fill:#000;
}
}
@media(prefers-color-scheme: dark) {
.light-theme .line {
fill:none;
stroke:#000;
stroke-width:10;
stroke-miterlimit:10;
}
.light-theme .path {
fill:#000;
}
.dark-theme .line {
fill:none;
stroke:#fff;
stroke-width:10;
stroke-miterlimit:10;
}
.dark-theme .path {
fill:#fff;
}
.line {
fill:none;
stroke:#fff;
stroke-width:10;
stroke-miterlimit:10;
}
.path {
fill:#fff;
}
}
.dark-theme .line {
fill:none;
stroke:#fff;
stroke-width:10;
stroke-miterlimit:10;
}
.dark-theme .path {
fill:#fff;
}
</style>
<polygon class="line" points="709.3,242 466.1,382.4 466.1,663.2 709.3,803.6 952.5,663.2 952.5,382.4"/>
<line class="line" x1="952.7" y1="382.3" x2="1112.1" y2="290.3"/>
<line class="line" x1="518.7" y1="411.3" x2="710.7" y2="301.3"/>
<line class="line" x1="902.7" y1="633.3" x2="902.7" y2="411.3"/>
<line class="line" x1="710.7" y1="744.3" x2="518.7" y2="633.3"/>
<path class="path" d="M1225.2,207.1c7.5,7.2,11.7,15.3,12.5,24.5h-14.2c-1.6-6.9-4.8-12.4-9.6-16.5c-4.8-4.1-11.6-6.1-20.3-6.1 c-10.6,0-19.2,3.7-25.7,11.2c-6.5,7.4-9.8,18.9-9.8,34.2c0,12.6,2.9,22.8,8.8,30.7c5.9,7.8,14.7,11.8,26.3,11.8 c10.7,0,18.9-4.1,24.5-12.4c3-4.3,5.2-10.1,6.7-17.1h14.2c-1.3,11.3-5.5,20.8-12.6,28.5c-8.5,9.2-20.1,13.8-34.6,13.8 c-12.5,0-23-3.8-31.5-11.4c-11.2-10-16.8-25.5-16.8-46.4c0-15.9,4.2-28.9,12.6-39c9.1-11,21.6-16.6,37.6-16.6 C1207.1,196.4,1217.7,199.9,1225.2,207.1z"/>
<path class="path" d="M1345.1,214.7c7.1,9.5,10.7,21.7,10.7,36.5c0,16.1-4.1,29.4-12.2,40.1c-9.6,12.5-23.2,18.8-40.9,18.8 c-16.6,0-29.6-5.5-39-16.4c-8.4-10.5-12.7-23.9-12.7-40c0-14.5,3.6-27,10.8-37.4c9.3-13.3,23-19.9,41.2-19.9 C1321.9,196.4,1335.9,202.5,1345.1,214.7z M1332.2,283.2c5.7-9.2,8.6-19.8,8.6-31.8c0-12.6-3.3-22.8-9.9-30.5 c-6.6-7.7-15.7-11.6-27.1-11.6c-11.1,0-20.2,3.8-27.2,11.5c-7,7.6-10.5,18.9-10.5,33.8c0,11.9,3,22,9,30.1 c6,8.2,15.8,12.3,29.3,12.3C1317.2,297,1326.5,292.4,1332.2,283.2z"/>
<path class="path" d="M1448.5,199.3h14.7v44.5h56v-44.5h14.7v107.6h-14.7v-50.3h-56v50.3h-14.7V199.3z"/>
<path class="path" d="M1372.4,320.9c2.7-5.6,8-10.6,15.8-15.2l11.7-6.8c5.2-3.1,8.9-5.7,11-7.8c3.3-3.4,5-7.2,5-11.6c0-5.1-1.5-9.1-4.6-12.1 c-3.1-3-7.1-4.5-12.2-4.5c-7.5,0-12.7,2.8-15.6,8.5c-1.5,3.1-2.4,7.3-2.6,12.7h-11.2c0.1-7.6,1.5-13.8,4.2-18.6 c4.8-8.5,13.2-12.7,25.2-12.7c10,0,17.3,2.7,21.9,8.1c4.6,5.4,6.9,11.4,6.9,18.1c0,7-2.5,13-7.4,17.9c-2.8,2.9-8,6.4-15.3,10.5 l-8.4,4.6c-4,2.2-7.1,4.3-9.4,6.3c-4.1,3.5-6.6,7.5-7.7,11.8h47.7v10.4h-60C1368.1,333,1369.7,326.5,1372.4,320.9z"/>
</svg>端末をダークモードにするか、左下のダークモードオンオフスイッチで線の色が黒→白になったでしょうか。
まとめ
・SVGコードを埋め込む（インライン）
・<style>タグの中にスタイルを書く
・メディアクエリのprefers-color-schemeを使う
この記事を書いた人
みやの
Web・DTP担当
