【SVG】インラインSVG、ふと思いついたんですが絵文字素材になるかも？？

　どうも！LSSです！！

SVGのコードを書いたテキストファイル、拡張子を「.svg」で保存すると、SVG形式の画像ファイルとして使用できます。

それに対し、ここで自分がやってきたように「ページの中に<svg>タグを書く」という使い方を「インラインSVG」といいます。

この「インラインSVG」という名称から、ふと思いつきました！

HTML＋CSSには「インライン要素」と「ブロック要素」があり、ざっくり言えば
「インライン要素は一文の中でも部分的に装飾可能な要素」、
「ブロック要素は

改段を伴う

装飾可能な要素」
って感じですが、「インラインSVG」ってのも、もしかしたら前者のように
「一文の中で部分的に使える」
ものなんじゃないか？と。

で、試してみました！

例えば、このように絵文字っぽく使う事もできますね^^

コード

例えば、このように<svg xmlns="http://www.w3.org/2000/svg" style="height: 1em;" viewbox="0 0 20 20"><path d="M 0,20 5,0 5,10 10,0 10,10 15,0 15,10 19,0 19,20 z" stroke="black" fill="lightgreen"></path></svg>絵文字っぽく使う事もできますね^^

はてなブログの「HTML編集に貼り付ける」用に前後に[]をつけたコード

例えば、このように[]<svg xmlns="http://www.w3.org/2000/svg" style="height: 1em;" viewbox="0 0 20 20"><path d="M 0,20 5,0 5,10 10,0 10,10 15,0 15,10 19,0 19,20 z" stroke="black" fill="lightgreen"></path></svg>[]絵文字っぽく使う事もできますね^^

めっちゃ適当に書いたSVGですが…これ、使えますね！（絵じゃなくて技術のほう）

なんか気の利いた絵文字をSVGで描く事ができれば、「絵文字素材」としてコード配布して、ブログなどで使ってもらえそう！？

ただし、あまり凝った絵文字でSVGのコードが長くなるのも考えものかもですが^^;

例えば先日の「もぐら」を絵文字として使うとすると、って感じに入れられますが、

コード

<p>例えば先日の「もぐら」を絵文字として使うとすると、[]<svg xmlns="http://www.w3.org/2000/svg" style="height: 1em;" viewbox="0 0 100 100"> <path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path> <path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path> <path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path> <circle cx="35" cy="60" r="7" fill="black"></circle> <circle cx="65" cy="60" r="7" fill="black"></circle> <circle cx="50" cy="80" r="13" fill="white"></circle> <circle cx="50" cy="75" r="5" fill="black"></circle> <ellipse cx="25" cy="80" rx="10" ry="5" fill="pink"></ellipse> <ellipse cx="75" cy="80" rx="10" ry="5" fill="pink"></ellipse> <path d="M 20,70 40,75 20,80" fill="none" stroke="black" stroke-width="2"></path> <path d="M 80,70 60,75 80,80" fill="none" stroke="black" stroke-width="2"></path> </svg>[]って感じに入れられますが、</p>

その絵文字のために↑こんな仰々しいコードになってしまいますｗ

コードが長ったらしくなる点にだけ、目を瞑れば、自分の文章中で「好きに作った画像」を「絵文字」として使用できるわけです^^