「SVG」タグのついたQiitaの393記事を遡って、令和に残したい記事を選ぶ

動機

1. SVGで多彩な表現ができることを知ってほしい！
2. 自分でも記事を書きたいけど、どんなことを書いたら良いだろうか？
3. どんな記事があるのか調べてみよう！

Qiitaのユーザーや記事が年々増えていく中で、「有益な情報を未来に残すために、それらを選別する方法を検討する段階ではないか」と考えています。（個人の意見です）

選定基準

以下のような基準を考えながら選んでいきました。

• より新しい情報であること
  → 内容が重複する記事がある場合は、内容と投稿時期を検討した上で1つを選んでいます

• 実装寄りの記事ではないこと　　
  → Vue.js, D3.js, Leaflet の使い方に関する記事も除外しています

• 特定のサービスに特化した内容ではないこと
  → IE対応などは除外しました

私自身もSVGの記事を書いていますが、Elm（関数型言語）でのノウハウのため対象外としています。
その他、私が見落としている場合もあるので「なんでこの記事は入ってないの？」というようなご指摘あればご意見ください。

選んだ記事は、1年ごとに区切りました。
記事リンクの後にコメントをつけています。
では、ご覧ください。

平成31年

• SVGを使うときに知っておくといいことをまとめました
  → 実用的な最新の知見がまとめられています。

• SVG上に要素を走らせる
  → pathに沿って動かすアニメーションは楽しいので、お薦め記事。
  　「Vue.jsでやってみました」ではないのも好感度高いです。

• SVGの図形を拡大した際にストロークまで太くなってしまうのを防ぐ
  → SVG Tiny 1.2についての情報はQiitaでは貴重です。
  　GUNMA GIS GEEK の @_shimizu さんによる記事です。

• SVGとD3.jsの入門まとめ
  → SVGの基礎的な知識について広く簡潔にまとめられています。
  　後半はD3.jsの話題に移りますが、SVGの章だけでもお薦めできる記事です。

平成30年

• SVGのtextPath要素上のテキスト均等配置について
  → かなりマイナーな使い方かもしれません...でも、いつか必要になるかも。
  　丁寧な検証なされています。

• プラグインなしで作るSVGアニメーション その2
  → ただのアニメーションではなく、スクロールの量で制御しているのが面白いです。

• JavaScriptで2次元図形描画する際の壁のアウトラインの作り方
  → 一般に使われるものではないけど、SVGの実用例として非常に興味があります。

• JavaScriptのテキスト（超入門）
  → テキストの本文をあまり読めていないのですが、目次を見た感じだと速習には良いのかもしれない。

• SVGとCanvasの特性の違いをチャートの実装を使って比較する
  → SVGとCanvasのパフォーマンス検証の一例。

平成29年

• SVGをuseタグで使いまわす
  → SVGを手打ちする人には欠かせない技術。
  　useタグを題材にした記事は他にもいくつか見られました。

• 精度を保ってSVGを1バイトでも小さくする
  → こだわりが感じられます。

• SVGでフリーハンドお絵描き
  → 私はお絵かきアプリを作る予定ありませんが、需要のある記事だと思います。

• たった15KBで、スケーラブルかつ写実的なバラク・オバマ
  → SVGイラスト手書きで最適化マンだ…！

平成28年

• 一発芸！SVGでHTMLを画像化する
  → ベクター画像からラスタ画像への変換を題材にした記事も複数ありました。

• SVGフィルタ サンプル集
  → フィルタのサンプル集はQiitaではこの記事が充実しています。
  　Qiita以外で他にもあるかなぁ。

• SVGで数をモリモリ数える
  → デジタルな数字表現をSVGで。
  　実際にはフォントにするのが正解かなとは思います。
  　でも、こうやって作るの楽しいんだろうなぁ。

• SVGで円をアニメーションさせたい時のMEMO
  → こういうのをやりたい時もあるはず。
  　アニメーション系の記事もいくつかあったのですが、解説記事は少なめでした。

平成27年

• [SVG] viewBoxについての考察
  → viewBoxそんなに難しいことないけど、記事が読みたいならこれがお薦めかな。

平成26年

• SVGによるパーリンノイズ
  → これ面白い。

過去の393記事を遡ってみて

多くの記事は、D3.js や Leaflet が流行した時期に書かれているようでした。
また、React や Vue に代表される仮想DOMを扱う手法の普及が、SVGの普及や仕様に対する理解を強く後押ししている印象です。
（もちろん、他にもいくつかの理由が考えられます）

フィルタやアニメーションを解説した記事がもう少しあるだろうと予想していましたが、より実装に特化した記事が多いように感じました。
次はQiitaの外にも目を向けてみたいと思います。

そして令和へ...

• 岡田を切る技術
  → 圧倒的にテクニカルな記事が投稿されました。
  　令和ですもの。

私自身も、SVGの新たな表現ができないかと試行錯誤中です。
いまは水生生物をSVGで表現する実験をしています。
（興味のある方は一緒にやりましょう）

Aquatic-Organisms
https://y047aka.github.io/aquatic-organisms/

上手くできたら記事にしたい。