絵文字をSVGで自作してwebに表示。

〽️ しかもアニメーション。

SVGアニメーション、作り方。

静的コンテンツの枠を飛び出す。

CSSアニメーション、作り方。

webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

オリジナル絵文字が作れるのでは？

こんにちは、「ふ」です。
SVGアニメーションのコーナーではこれまでいろんなことをやってきましたが、ここでふと思ったことがあります。

SVG画像をテキストに挿入することで、「絵文字化」できるのでは？

font-sizeを合わせたimg要素をテキストの間に挿入して表示。これはまあ、CSSでレイアウト調整すれば可能であることは想像できます。
ところで、その画像自体は..SVGを使って自分で作成したもの。

ということは、

SVGでweb用絵文字を自作。

が可能ということではないでしょうか!?

よし、やってみましょう。今回はSVGで絵文字を自作→テキストに挿入する方法を試してみたので、紹介します。
実現すれば、オリジナルの絵文字をweb上で自由に扱えるようになる〜ということになります。楽しみですね！

試してみる。

■ arrow.svg 矢印のSVG画像を用意しました。
さっそく、<p>要素に挿入してみましょう。

こんな感じです

そのままブラウザで表示すると、最初はこう⬆︎なるかと思います。
ここからサイズや位置を調整していきましょう。

画像のstyleをデフォルトに。

普段サイトに貼っている<img>要素にはwidthやmargin、何かしらのCSSが指定されていると思います。
今回絵文字として使う画像に対して、通常の<img>に指定しているstyleが影響しないよう、１度デフォルトにしましょう。

.emoji { 「「１all:initial;」」 }

「all」は全てのプロパティを指します。その値「initial」はデフォルトの状態にする、という指定です。
デフォルト化はこれでOKです。

親要素のfont-sizeに合わせる。

画像のheightを親である<p>要素のfont-sizeに合わせます。ここで「widthではなく、height」を合わせる理由は、横長の画像を絵文字にしたい場合を想定してのことです。
また親要素のfont-sizeは、CSSやデバイスの状態によって変わってくる場合があるので、CSSから単純に<p>のfont-sizeを拾ってきても、必ずしもサイズは一致しません。

そこでJavaScriptのgetComputedStyle( )メソッドを使い、事実上表示されている<p>のサイズを取得→絵文字のheightに適用させます。

「「３// 絵文字要素を取得」」　「「１..①」」 const emoji = document.querySelectorAll(".emoji"); emoji.forEach(function(value) ｛ bb「「３// 自身の親要素のstyleを取得」」　「「１..②」」 bblet style = window.getComputedStyle(value.parentNode); bb「「３// 絵文字要素のheightに適用」」　「「１..③」」 bbvalue.style.height = style.fontSize; ｝);

① 絵文字にしたい画像要素を取得します。
要素が複数の場合も想定されるので、querySelectorAllを使ってクラス名「emoji」の要素を全て取得。次に続く処理もforEachメソッドで行います。

② 自身の親である、テキスト要素のCSSを取得。
絵文字要素が配置されている親要素は、状況によって<p>だったり、<h2>などの見出し要素だったりします。「parentNode」で参照させることにより、配置場所に応じたテキストのスタイルを抽出することができます。

③ 絵文字要素のheightをテキストのfont-sizeに合わせます。
Js内の記述のため「fontSize」とキャメルケースで記述するようにしてください。

こんな感じです

ブラウザでの表示です⬆︎。

おや？
サイズはそろったみたいですが、絵文字がやや上に寄っているような....

vertical-alignで位置揃え。

CSSのverticale-alignは、インライン要素の揃え位置に関するプロパティです。
その初期値は「baseline」で、これはアルファベット表記の下線⬆︎の位置。ここにインライン要素を揃えるように指定されています。

アルファベットのbaselineを日本語テキストに当てはめてみると、文字の下端よりも少し上に位置します。

ここに絵文字要素が揃えられていたため、テキストよりもやや上に表示されてしまっていたのです。
vertical-alignの位置を文字の下端である「text-bottom」に変更しましょう。

.emoji { all:initial; vertical-align:「「１text-bottom」」; }

こんな感じです

絵文字要素の位置がテキストに馴染みました。

ロリポップ！の取次店になりました。

〽️ 「ふ」が使ってるレンタルサーバーを紹介します。

もちろんアニメーション。

そして、絵文字要素はSVGフォーマットなのでもちろん、色を変更したりアニメーションさせることができます。

⬆︎はSVGファイル内の矢印を描画しているオブジェクト。
id名「arrow」をつけて....

同じくSVGファイルの内部にCSSアニメーションを記述します。Y軸を基点に回転させてみました。

こんな感じです

ブラウザでの表示です。
ちゃんとテキスト群に溶け込んだまま、アニメーションしていますね ♪

最後までお読みくださり、ありがとうございます。
今回はSVG画像の絵文字化に挑戦してみましたが、結果、なかなか使えそうです。
まだまだ試作段階にすぎないのですが、いろんな可能性が見えてきます。サーバー上のSVG画像を拾ってくるとか、正規表現での記述の短縮化....などなど。
楽しいアイデアが浮かんだら、また紹介させていただきますね。

ではまた〜