ECサイトではカートボタンのアイコンのところに、カートに入っている商品数が表示されていることがよくあります。

このような場合、CSSで画像の上に<span>などに入っているテキストを配置する場合が多いと思います。

ただ、この方法を使った場合、

・テキストの大きさがCSSで指定したものに固定される(整数のpx単位に限定される)

・ブラウザによってテキストの最小サイズがあり、それ以下にはテキストサイズを小さくできない

と言った理由によって、特にレスポンシブサイトでは、レイアウトに苦労する場合が出てくることがあると思います。

 

この問題を解決してくれる方法の一つに、インラインSVGを使う方法があります。

SVGファイルやインラインSVGを使ったアイコンは最近見かける機会が少しずつ増えてきています。

このSVGには<text>という要素があり、アイコンの中にテキストを配置することができるのですが、

通常のHTMLと異なり、SVGではフォントサイズはSVGのviewBoxのサイズからの相対的な大きさとなるため、

アイコンの中により自然にテキストを配置することが可能となります。

 

また、インラインSVGではテキストの内容をHTML上に記述してそのまま表示できるため、

システムへの組み込みもスムーズに行えます。

 

↓こちらはインラインSVGの<text>を利用したアイコンで作ってみたものです。

DEMO

 

作り方

まずは、Illustratorや「Method Draw」などを使ってアイコンのSVGファイルを作成します。

 

SVGファイルができたら、テキストエディタ等で開いて、

SVGの中の部分をHTML上にインラインSVGとしてコピー＆ペーストします。

 

配置したら、インラインSVG上の<text>に適当なIDをつけておくと、後々JavaScriptなどでテキストを変更する場合などに便利です。

このときの注意点としては、IllutratorやMethod Drawでテキストを配置した場合は、センタリングで配置した場合でも、

左寄せのテキストとして配置されてしまうため、テキストが変更されてもセンタリングを維持したい場合は、

「text-anchor=”middle”」という属性を<text>に追加します(すでにtext-anchor=”left”とある場合はmiddleに変更)。

さらにずれた分だけx座標を変更すると、完全な中央寄せとして配置できます。

 

変更後

アイコン以外でも、レスポンシブデザインで図の中に自由にテキストを配置して運用したい場合など、

いろいろな場面で使うことができると思います。

 

おまけ

↓インラインSVGだとパスにそってテキストを配置することもできるので、WEBのデザインの幅が増えそうです。

おまけDEMO