SVGチュートリアル

SVGチュートリアル要約

• Hunor Márton BorbélyによるSVGチュートリアルで、基本的な図形から始めて複雑なアニメーションまで、SVG画像のコーディング方法を段階的に学べる。
• 基本図形の描画、クリスマスツリー、ジンジャークッキー人形、家づくりなど多様なテーマを扱い、クリップパス、グラデーション、ベジェ曲線、テキストをパスに沿って描く方法など、SVGのさまざまな機能を紹介している。
• また、JavaScriptを使った時計の描画、SVG要素へのインタラクション追加、JavaScriptでSVGダイアグラムを生成する方法など、SVGと他の技術を組み合わせる方法も含まれている。

GN⁺の意見

• このチュートリアルは、初級ソフトウェアエンジニアがSVG画像をコーディングする基礎から高度な技術まで体系的に学べる優れた資料である。
• 特に、実際の時刻を表示する時計の作り方やSVG要素にインタラクションを追加するなど、実用的な例が含まれており、学習者にとって非常に有益で興味深い体験を提供してくれそうだ。
• SVGを学びたい人にとって、このチュートリアルはグラフィックWebデザインへの理解を広げ、Webページに独創的な視覚要素を追加する力を高められる魅力的な学習資料となるだろう。

[GN⁺]

Hacker Newsのコメント

• SVG と React の組み合わせは過小評価されている。React のあらゆる機能と抽象化を活用でき、DOM の代わりに任意のグラフィックスをレンダリングできる。グラフやチャートの描画に使ってみたところ、状況によっては Canvas を圧倒する。たとえば、簡単なインタラクションは必要だが、ピクセル単位の操作のような複雑なグラフィックスは不要な場合に有用だ。
• SVG は柔軟なフォーマットであり、関連チュートリアルを通じて学ぶために時間をかける価値がある。React コンポーネントと組み合わせて SVG を使えば、HTML だけでは難しい優れた UI を実装できる。
• React で実装したインタラクティブな "Circle of Fifths" コンポーネントを、音楽理論のサイドプロジェクトで使っている。そのコンポーネントは利用可能な状態で、SVG を使って Circle of Fifths を構築する過程についてのブログ記事が役に立つ。
• SVG の <clip-path> の使用例では、大きな円を 2 回定義しているのは非効率だ。サイズを変更するときに両方を修正しなければならないので、defs をすでに使っているなら、円は 1 回だけ定義して再利用するほうがよい。
• SVG と React を使ったインライン SVG コーディングは楽しく、<foreignObject> タグを使えば HTML 内で SVG を活用できるので、HTML のほうが得意な作業（リンク、画像、基本的なフレックスボックスのスタイリングなど）に便利だ。
• 数年前、インターフェース作業の途中で SVG を使ったとき、2 種類のカラースキームのために単に SVG ファイル内のカラーコードを検索して置き換えるだけで、デザイナーを驚かせた。
• チュートリアルへの好意的なフィードバックに感謝し、見つかった誤りを修正した。まだ微調整中で、たとえば Twitter でサムネイルプレビューが動作しない理由を知っている人がいないか気になっている。
• SVG の「タグ」という用語について少し不満がある。HTML を始めたばかりのころはすべてを「タグ」と呼んでいたが、XHTML が登場してから「要素」と呼ぶようになった。今でも「タグ」だと思っているが、いまは「要素」と言っている。
• 曲線とクリッピングの例が特に気に入った。path を好んでいて、ほとんど何でもできるし、他の方法より冗長さが少ない。絵を描くのが苦手で画像も嫌いなので、パフォーマンスと利便性のためにサイドプロジェクト全体を SVG で構築した。このチュートリアルを通じて、リファクタリングすべき部分が多いと気づいた。
• テキストと画像を一緒に使った例を見てみたい。今まさにこの問題に苦労しており、整列は厄介な問題だ。Inkscape を使ってみたことはあるが、必要なものを生成するには XML を書く側に属している。
• SVG を直接コーディングするのが一般的な慣行なのか、それともたとえば Figma で絵を描いて SVG ファイルを生成するのが一般的なのか気になっている.