1
/
5
This page is intended for users in Singapore. Go to the page for users in United States.

謎の空白問題解決!SVGスプライトを用いた文字グラデーション



Webサイト作りたい!と思い立ったはいいものの、せっかくならデザイン性の高いサイトにしたいと思いますよね。

ちょっと今のサイト味気ないなあ…デザイン変更したいなあ…という時!

文字にグラデーションを用いるだけでだいぶイメージが変わります。

CSSで簡単に文字にグラデーションをかけることはできるのですが、対応していないブラウザがあります。

今回はSVGスプライトを用いて文字にグラデーションをかけていきます。ですが…。

どこからか謎の空白が現れるのです!

この記事では謎の空白についての解決方法をまとめています。

そもそもSVGスプライトって何?

SVGスプライトとはアイコンやロゴなど、複数のSVGデータを1つのファイルにまとめて、使いたいデータだけ呼び出す方法です。
出典 くらしのマーケット開発ブログ

SVGデータが収納されている場所から、useタグを用いて要素を呼び出します。

defsタグで描画されているスペース内にsvgデータが表示されます。

図にするとこんな感じ。




いざ実装!

では実際にSVGスプライトを用いて文字グラデーションを実装してみます! (空白をわかりやすくするため色をつけています)

なお、こちらのグラデーション技法は下記サイトを参考にしています。


参考 IE非対応のCSSグラデーションを文字にかける2つの方法(画像・SVG)

svgの中にテキスト記述、グラデーションのカラーを指定します。 x,yで文字の縦位置と横位置を指定しています。

svgタグに付与しているxmlns属性には下記の役割があります。

ブラウザが「"xmlns="http://www.w3.org/2000/svg"」が宣言されていると解釈するためのものです。URLの参照先自体に意味はありません。
出典サンプルコードで学ぶ SVGの読み方、書き方



白の部分が、例の謎の空白でございます…。 まったく意図していないのに発生したこの空白、どうにかして消したい…。

原因は…。

どうやらこの空白の原因は、描画オブジェクトを定義するdefsタグによるもののようです。

defsタグは後で再利用できるよう描画オブジェクトを定義します。
出典 MDN web docs



さよなら空白…。

ではここから実際に空白を消していきましょう!先ほどのcssに


  • height:0;
  • display:block;

を追加します。




まず、インライン要素であるsvgタグに対し、高さの指定を有効にするためにdisplay:block;を使います。


<インライン要素と高さの関係について>

インライン要素の高さと幅はコンテンツによって決まります。(例)文字の長さ、画像の大きさなど

手動で設定できるものではないため、display:block;を使うと、高さを設定できるようになります。

display:block;によって、高さの設定が可能になったので、height:0;にします。

そうすることで、空白がきれいさっぱり☆になるわけです。


最後に

今回はSVGスプライトを用いて文字にグラデーションをかける際に発生する空白問題の解決法をまとめました。

謎の空白問題は誰もが経験する問題かと思いますが、この記事が同じ問題で悩んでいる方への参考になれば幸いです!


弊社ロジカルスタジオでは、経験豊富で個性豊かなメンバーがあなたの活躍を待っています!

少しでも興味を持ってくださった方はぜひご応募ください!!

マークアップエンジニア
即戦力!デザイン再現率に自信があるマークアップエンジニアをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオ's job postings
15 Likes
15 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more