AOYAMA KOJI's PROGRAMMING BLOG

テキストで描く画像フォーマットSVG

2020/04/18
プログラミングブログ / プログラミング全員向け(プログラミング無関係)プログラミングを始めようとしている方・初心者向け初中級者向けプログラミング解説プログラマー向け実装解説 / 技術解説 / グラフィックス / SVG / (本記事)
テキストで描く画像フォーマットSVG

　テキストを書いて画像が描けてしまう画像フォーマットSVGをご紹介します。
　実はここで最初SVGを使用していたのですが、 アップロードしたら画像が壊れてしまったので慌ててPNGに変更して上げ直していました。 今はSVGを使う形に戻しています。
　画像編集アプリケーションとして私はプライベートではGIMPを使っていますが、 まだまだ慣れず機能が豊富すぎて使いづらいので、 今のところ幾何学的な絵はテキストエディタで書けるSVGの方が作りやすいかなあ。。。という感じです。 あとGIMPでSVGを読み込めるのでtwitter card用のPNGは問題なく作れます。

SVGってこんなの


テキストで描く画像フォーマットSVG fig.2 　ウィキペディアによるとSVGはScalable Vector Graphicsの略のようですね。 拡大や縮小が可能な、線で構成される画像って感じでしょうか。 線なので、拡大や縮小しても劣化が無いのですよね。
　そしてこのボールの画像は、そのSVGで書かれています。 実は中身はテキストです。 以下にそのテキストを貼りますね。 Webブラウザーの機能でソースを見ることができるものもありますので、そちらも活用してみてください。
<?xml version="1.0" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 42" 
     style="background:rgba(0,0,0,0);" 
     xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="grad001" fx="25%" fy="25%">
    <stop offset="0%" stop-color="#FFFFFF" />
    <stop offset="70%" stop-color="#4D854A" />
    <stop offset="100%" stop-color="#284426" />
  </radialGradient>
  <circle cx="16" cy="16" r="16" fill="url(#grad001)">
  </circle>
</svg>

　簡単に解説すると、最初のxml云々はおまじない、 svgエレメントで大きさを指定、 radialGradientでグラデーションを定義して、 circleで円を描いて、 その塗りパターンとして定義したグラデーションを使用する、 って感じです。
　あとはpathとanimateMotionってのを使うと、こんな感じで絵を動かすこともできます。
テキストで描く画像フォーマットSVG
　機能がとても多いのと、詳細に説明しているサイトがたくさんあるので、細かいところはそちらに譲りますね。 逆に私はまだお作法をわかっていない可能性があるので、指摘されたらこっそり直すかもしれません。

対応していないWebブラウザーがあるのでSVGは使いづらい


　ただし上の画像を見ても「動いてない！」と言う方がいらっしゃるかと思います。 手元で調べた限り大御所Internet Explorerと、 Chromium以前のMicrosoft Edgeが対応していないようです。 画像が表示されるのでまだ良いのですが、動きには対応していないようです。
　Microsoft Edgeは新しいWindowsPCの標準Webブラウザー、 Internet Explorerは少し古いWindowsの標準Webブラウザーです。 Webブラウザーというのはインターネットのホームページを閲覧するのに使うツールですね。 パソコンでWebブラウザーを意識しない場合はこれらが使われていると思って良いでしょう。
　一方で手元で対応していることを確認したのは、 iPhoneの標準WebブラウザーのSafari、 Androidの標準WebブラウザーのGoogle Chromeです。 ただしGoogle ChromeはWindowsPCとiPhoneで確認しました。 また私の普段使用しているFirefoxもWindowsPCで確認しました。
　Internet ExplorerとMicrosoft Edgeという、それなりのシェアを占めるであろうWebブラウザーが非対応ということで、 プロとしては少々使いづらい状況かなと思いますが、 気にしないで済むのが個人ブログの良いところですね(笑)

更新すればEdgeはChromiumベースになりSVG対応


　Chromiumというのは、Google Chrome等で使われるWebブラウザーのエンジンです。 最新のMicrosoft EdgeはChromiumベースになりました。 つまりGoogle ChromeとWebページ表示関連の挙動が同じになりますので、SVGにも対応します。
　ただし自動更新ではChromiumベースにはならないようです。 私は手動でMicrosoft Edgeを最新版に更新することで、上の絵が動くようになりました。 自動的に更新されないのは、未対応のサイトが多いからだと思います。 日本ではe-TaxがChromiumに対応していないらしく(未確認)、現状ですと更新するのは危険かもしれません。 私はやっちゃいましたけれどね。

twitterも対応していない


　現時点ではtwitterで*.svgファイルを画像として投稿できないようです。 公式のtwitter card の解説に 「JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.」 とあります。 つまりSVGは非対応ですね。 そのため当ブログでは、ツイートで紹介する際の画像に使用されるtwitter:card画像としてPNGWEBPファイルを別途作成しています。 いずれ対応されたらまた考えます。
　あとGIFアニメは最初のフレームのみ出ると書いてありますが、 twitter:cardではってことでしょうね。 gifアニメもツイートはできる認識です。 このあたりは色々と未確認で、試したのはPNGとSVGだけだったりしますが、 このいい加減さも個人ブログだから許されるところ(汗)

SVGが壊れていた理由


　さてここからが本題です。 アップロードしたSVGがなぜ壊れていたのか。 結論としてはWebサーバーのmime-typeの問題でした。 要はWebサーバーが*.svg というファイル形式を知らなかったということです。
　ウィキペディアによるとSVGは2001年登場のようで、 現在のサーバーを借りたのはそれより前だったと思いますので、 知らなかったのは仕方がないですね。 最新版に更新されていけばこの問題は起きませんが、 勝手にバージョンが上がると色々と動かなくなるので、 以前のバージョンのまま保守されているのは大変ありがたいのです。 まれにこういう問題は起きますけれども。
　手元のローカル検証用には最新Apacheを入れてWebサーバーを構築しているので、 アップロードするまでこの問題に気づきませんでした。 しかし原因がわかれば簡単です。 借りているサーバーは設定の上書きが可能なので、以下の一行だけの.htaccessファイルを作り、
AddType image/svg+xml svg

　適切なディレクトリに置いて無事解決しました。 もうこれで心配はなくなりましたので、適宜SVGを使っていこうと思います。

まとめ


　本記事では、テキストを書いて画像が描けてしまう画像フォーマットSVGをご紹介しました。
　アニメーションもできますし、活用できるところも多いです。

補足


・(本記事公開後)まとめを追加しました。
・(本記事公開後)twitter:card画像をPNGからWEBPに変更したため一部改修しました。


カテゴリー：SVG
[PR]