【CSS Modules】vector-effectプロパティの使い方

vector-effectプロパティは、CSS ModulesにおいてSVG（Scalable Vector Graphics）要素が拡大・縮小された際の視覚的な振る舞いを制御するためのプロパティです。

通常、SVG要素はブラウザ上で拡大・縮小されると、その要素の線幅（ストローク）や図形自体のサイズも一緒にスケーリングされます。しかし、デザインによっては、ズームインやズームアウトの操作が行われても、線の太さや図形の特定の側面を常に一定に保ちたい場合があります。このような場合にvector-effectプロパティが非常に役立ちます。

このプロパティにnon-scaling-strokeという値を指定すると、SVG要素がいくら拡大・縮小されても、適用されている線の太さは常に元の値のまま維持されます。これにより、ロゴやアイコンなど、細い線がズーム時に太くなりすぎたり、逆に小さすぎて消えたりするのを防ぎ、視認性を一貫して保つことが可能です。

また、non-scaling-sizeという値を設定することで、図形全体のサイズをズームレベルに関わらず一定に保つことができます。これは、特定の要素が常に同じ物理的なサイズで表示されることを保証したい場合に有効です。さらに、zoomという値は、要素に適用されているCSSの変換とは別に、ビューポートのズームレベルに基づいて要素をスケーリングします。

これらの値は組み合わせて使用することも可能で、例えばnon-scaling-stroke non-scaling-sizeと指定することで、ストローク幅と図形サイズの両方をスケーリングしないように設定できます。このプロパティを適切に使用することで、さまざまなデバイスやズーム環境においても、SVGグラフィックの一貫した高品質な表示を維持し、ユーザーエクスペリエンスを向上させることができます。

Copy
1element {
2  vector-effect: non-scaling-stroke;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません