How is this page used?
- Easily replace the color your SVG file (Only stroke or fill supported)
- Easily convert your SVG file for dark mode
- Does not upload to the server (only works in your browser)
- Protect your design
What’s HSM (Hybrid SVG Maker)?
In 2022, IE will finally become unusable. This is A SUPER HAPPY NEWS for all web-front engineers, but I think it also signals the beginning of the next battle for designers and engineers. One of those battles is dark mode support.
SVG files can support both light mode and dark mode by inserting the following code “@media (prefs-color-scheme: dark)“. Check out the Favicon on this page for an example.
That's very wonderful.(Check it out because Favicon on this page is exactly that.)
I call SVG files that can support multiple modes “Hybrid SVG”.
However, the ability to do this transformation in Drawtools (e.g. Illustrator) is not provided (at least from what I can tell).
So, who will be responsible for these tasks? Front-end engineers? Designers?
If it’s just one or two colors, a designer might be able to open a text editor and handle it...
However, What if the file can not be edited by other designer? What if the designers don’t have the skills, experience, or time to change a lot of colors accurately? What if the designer says “Hey, I’m not a programmer!“?
Also, it's strange for an engineer to use the "sed command" for a designer's little curiosity.
This is where the “Hybrid SVG Maker” comes in handy.
This site makes it easy to create SVG files that support color substitution and dark mode without having to upload the SVG to a server.
It is still in beta, but please try it out.
History
「Hybrid SVG Maker」とは？
- 簡単にダークモードに対応したSVGを作ることができるものです。
- 簡単にSVGの色を変更することができます。(strokeとfillのみ、cssじゃなく直接fillを指定してるものは挙動が怪しいかもです。)
- ブラウザのみで動きサーバーにファイルをアップロードしません。
- ↑つまり未公開の画像でも問題なく使うことができます。
そもそも「Hybrid SVG」って何？
2022年やっとIEが使えなくなります。これで1つの戦いが終わりますが、次の大きな戦いの1つは「ダークモードへの本格対応」でしょう。
IEが終わるということは、殆どのブラウザでSVGが対応し、CSSで「@media (prefs-color-scheme: dark)」使えるようになるのと同義と言っても過言ではないと思います。
これは1つのsvgファイルでダークモードとライトモード（他にもモードはありますが）に対応することができるようになります。
私はこの1ファイルでライトモードとダークモードを対応したSVGをHybrid SVGと呼んでいます。
ベクターファイルとして優秀なSVGファイルにCSSを書くことで簡単に対応できるのは素晴らしいですが、そのCSSは誰が書くのでしょうか？
デザイナーの皆さん、わざわざSVGをエディタで開いてidを抜き出してcssを書きますか？
「sample」というtextをアウトライン化した場合idが6個生成され、それを全てCSSに記述する。色が増える度に正確にCSSを書くことができますか？(1,2色なら頑張れるかもしれないですけどね。)
引き継いだデザイナーがダークモード対応したSVGと知らなかったらどうでしょうか？
しかも、そのSVGファイルってイラレで見ても、通常の色のものしか表示されないのでchromeなどのブラウザにドラッグしてOSのテーマを変えて確認するしかないのですが、10個のSVGファイルを全部モードを変えて確認しますか？
エンジニア(特に、webfront)の皆さん、今やってる作業を止め、「ちょっとRGB値を変更する為に、たかだかIDを探してCSSの書き直しgitにコミットする」のをやりたいですか？
@2xのように、複数のファイルをサーバーにアップロードしてif文やスクリプトで分岐したいですか？
これらの戦いのためにこのツールを開発しました。β版ですが是非使ってみてください
History
