SVGチュートリアル

 (svg-tutorial.com)
6 ポイント 投稿者 GN⁺ 2023-12-08 | 1件のコメント | WhatsAppで共有
  • HTML内で画像を直接コードとして描く SVG学習資料で、基本図形からインタラクションまで段階的にたどれる
  • 学習の流れは viewBox、polygon、polyline などの基礎要素から path、ベジェ曲線、arc へと広がる
  • 変形パートでは回転・移動・再利用・スケール・一般変換を扱い、CSSパートでは アニメーション、hover、パスベースのアニメーション、CSSインラインSVGまでつながる
  • 高度なトピックではテキスト、clip-path、グラデーションを扱い、JavaScriptで実際の時刻を示す時計、インタラクション、データ駆動ダイアグラム、複数コンポーネントへの分解を実習する
  • line、circle、rect、polyline、polygon、text と quadratic/cubic Bézier curve、arc 用の エディターリンクも提供され、要素ごとにすぐ試せる

チュートリアル構成

実習用SVG要素とpathセグメント

関連記事

1件のコメント

 
GN⁺ 2023-12-08
Hacker News のコメント

  • SVG + React の組み合わせは過小評価されている。React の抽象化と力をそのまま使いながら、DOM の代わりに任意のグラフィックをレンダリングできるし、グラフやチャートのレンダリングのような用途では Canvas よりずっと優れていると思う
    ピクセル単位の操作のようなグラフィック的に複雑なものが不要で、多少のインタラクションだけでよい場合は特に良い。Canvas で hover 効果を作るには、マウスがどの要素の上にあるかを自分で計算する必要があって面倒だが、SVG なら onmouseover のような組み込み機能を使えばよい

    • その通り。SVG に クリックリスナーを付けて CSS で通常の HTML のようにスタイリングできる点は、ときどき魔法のように感じるし、React / JSX がそれを使いやすくしてくれる
    • このテーマについて良い入門資料はあるだろうか？ React もほとんど初心者レベルだが、かなり楽しく掘り下げられそうだ
      方向性やインスピレーションになる動く例があるとうれしい
    • クライアント向けに Preact.js と SVG を使って、画像分割＋タグ付けコンポーネントを作ったことがあるが、かなりうまくいった。この種のアプリケーションにはおすすめできる
    • その通り。HTML Canvas のほうがずっと高性能な場合も多いが、次の Figma を作るのでなければ、SVG で作業するほうがずっと便利だ
    • GlowForge で切るパターンを React & SVG でコーディングしているが、とてもよく動いている

  • 全体として素晴らしい資料で、例が本当に明快。ただし clip-path の部分で提案されているコードは大きな円を2回記述することになり、円のサイズを変えるには2か所を修正しなければならない
    すでに defs を使っているのだから、同じ定義を再利用する形で書くほうがよいと思う

    • 2つ目の要素も不要で、単に円を通常どおりレンダリングしてから clipPath の中で参照すればよい
      個人的には <g> で包むのも外したい。その構造を推奨する理由を理解したことがなく、<defs> の中になければレンダリングされてしまう要素を入れたいというごくまれな場合を除けば、得るものはなさそうに見える。例のような defs/circle の状況では、普通は <symbol> を使うのが正しい
    • その通りだし、良いアイデアだ。関連メモを追加してもよさそう

  • 本当に素晴らしい。SVG はきれいで柔軟な形式なので、進行中のサイドプロジェクトに直接関係しており、チュートリアルを時間をかけて追ってみるつもりだ
    他の人たちと同じく、SVG ベースの React コンポーネントを作るのはかなり楽しかった。React と JSX はインタラクションを付けやすくしてくれ、SVG は HTML だけでは簡単に作れない UI を可能にしてくれる
    音楽理論のサイドプロジェクト向けに、インタラクティブな Circle of Fifths をレンダリングする React コンポーネントを公開したことがある。まだやることは多いが、使える状態ではある: https://github.com/epiccoleman/react-circle-of-fifths
    SVG で Circle of Fifths を作る過程を扱った記事も書いたし、複雑な要素を描く過程を追う途中解説の部分が特に気に入っている: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    今は似た方法でフレットボード図のジェネレーターを作っているが、以前の記事を参考資料として見返せるので役に立っている。作業内容を文章に残す良い点は、問題をどう解いたかを「再生」できるところにある

  • この資料が気に入った。React で インライン SVG をいくつか作ってインタラクションを入れてみたが、触っていて本当に楽しい
    特に <foreignObject> タグが便利だ。SVG の中に通常の HTML を入れられるので、リンク、画像、基本的な flexbox スタイリングのように HTML のほうが得意なことを SVG アートプロジェクト内で処理できる
    作者に付け加えると、サイトのいくつかのリンクが動作していない。ページ下部の bio.link と、Day 11 “How to Draw Quadratic Bézier Curves with SVG” にあるインタラクティブなベジェ曲線デモのリンクが落ちている

    • インタラクティブデモのリンクは直した。そのサイトはおそらく Vue で作られているせいか、ディープリンクがいつも安定して動くわけではないようだ
      bio.link のほうは問題が見えないのだが、どんなエラーが出ているのか気になる
    • https://svg-tutorial.com/svg/transform ページ下部の “next example” リンクも /svg/path になっていて 404 になり、正しいリンクは /svg/use だと思う
    • 何かはいつも壊れているね。確認してみる
      foreignObject は自分も知らなかったが、本当に良い

  • 数年前にインターフェース作業をしていたとき、グラフィックの一部に SVG を使っていた。カラースキームが2つあったのだが、あるグラフィックが片方のスキームでしか用意されていなかったので、別の色の hex コードをもらいに廊下の向こうへ行った
    デザイナーが SVG ファイルを開き、色を全部見つけて置き換えるだけで2つ目の色を作るのを見て、とても驚いた

    • その発想はまったくなかった。いつか時間を大きく節約してくれそうなすばらしいヒントだ
    • 興味深いのだけど、「別の色の hex コードをもらいに廊下の向こうへ行った」という部分をもう少し説明してもらえるだろうか？

  • 素晴らしい。特に、いまだに苦手な 曲線 とクリッピングの例が気に入った
    個人的には、ほとんど何でもできて他の方法より冗長でない path を好んでいる
    長く学んできたが、まだ学ぶことが多いと感じる。絵が本当に下手で画像もあまり好きではないので、利便性と性能のためにサイドプロジェクト全体を SVG で作った
    今日の資料を見たら、かなりリファクタリングしなければならなさそうだ: https://eddiots.com/1

    • 役に立ったならうれしい。漫画も素敵だ

  • よいフィードバックに感謝していて、見つけてもらったいくつかの誤りは修正した。まだ動かないものがあれば知らせてほしい。まだ少し仕上げの調整中
    例えば、Twitterでサムネイルのプレビューがなぜ動作しないのか分かる人はいるだろうか？ 下位ページでは問題なく動作する

  • とてもよい。今自分が格闘している問題がテキスト + 画像なので、関連する例が1つか2つあるとうれしい
    配置は本当に厄介。Inkscapeも使ってみたが、必要なものを作るには確実に「XMLを直接書く」方向に近い

    • テキストは、線に沿わせる例以外はあまり試していない
      text-anchorは知っている: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      それから、ここではforeignObjectタグが役に立つかもしれないと誰かが提案していた: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • テキストは確かに面倒。svgwriteで表を生成するPythonコードを急いで作ったが、望む位置にテキストを置くのが地獄のようだった
      結局、いくつかの値を適当に補正して「これで十分」として終わらせた。自明でないテキスト配置例が必要だという要望には同意する
      [0] GitHubリンクはプロフィールにある
    • Inkscapeの整列機能は自分には合っている。もっと精密にしたいときはctrl+shift+xを押して座標を直接入力する
      InkscapeのXMLエディタは自分の環境ではかなり頻繁に落ちるが、編集するたびに保存することを覚えていれば使える

  • 普通はどうするものなのか？ 人々はSVGを直接コーディングするのか、それともFigmaのようなところで描いてからSVGファイルを生成するのか？

    • グラフィックデザイナーとして教育を受けたので、普段はInkscapeで直接描くか、他のプログラムから取り込んでいた
      http://shapeoko.github.io/Docs/のファイルサイズを妥当な水準まで下げるには、かなりの作業が必要だった
      後には、画像をクリックすると新しいウィンドウで開く仕組みも作った: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      さらに、部品リストの部品名をクリックすると図の中で該当部品が強調表示されるようにもできた
    • デザイン側の人たちはIllustrator、Sketch、Inkscapeのような好みのエディタを使うはず。コーダーもそうしたソフトで少し修正することはできるが、インタラクションがある場合はたいていSVGを直接編集する
      複雑な形状や曲線は、ときどきオンラインエディタに入れて可視化するが、このツールがよい: https://yqnn.github.io/svg-path-editor/
    • より複雑なグラフィックは、やはりデザイナーツールを使う方がよいだろう。だが単純なグラフィックなら直接コーディングしてもよい
      矢印やハンバーガーメニューアイコンが必要なら、そのままコードに入れる。時には紙とペンから始め、その後、十分によく見えるまで座標を合わせながら調整する
    • Adobeのもののような新しいTransformerベースのベクターモデルが登場することで、SVG生成はこれまでになく簡単になるだろう: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • 自分が手がけたプロジェクトでは、Inkscapeでファイルを作成または編集したあと、通常の画像のようにリンクしていた
      ときどき特定の静的ページに固有のグラフィックが必要でページ内に埋め込んだこともあるが、その場合のグラフィックはそれほど複雑ではなかった

  • 最近気づいたことの一つは、Reactアプリケーション内でSVGタグをJSXタグのようにインラインで入れられるという点だった
    これが正確にファーストクラスサポートなのか、Webpackが処理してくれているのかは分からないが、いくつかの場合にはロジック入りのSVGコンポーネントを作る感覚がとてもよい。今ではSVGの形状、色、一部セクションの省略などをReactベースのロジックで変えられる

    • 単純なSVG、または多くの変形が必要な場合にはよい
      ただしSVGコードをインラインにすると、ブラウザが画像をキャッシュできない。SVGが大きい、または変形が数種類しかないなら、画像の変形ごとに別エンドポイントを用意する方がよいかもしれない
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • その通り。HTML5以降はSVGをインラインで入れられ、Webpackのようなものは不要。普通に動く
      このチュートリアルの例の一つも、Reactで生成したデータ駆動のダイアグラムだ。両者を組み合わせると、かなり面白いことができる