68054


canvasへ描画した内容をSVGのパスデータへ変換して、SVGのパターンを適用させてみたいのですが、そもそも、canvasへ描画した内容をSVGのパスデータへ変換することは出来ますか？

検索してみたら下記ページが見つかったのですが、ここで記載されている内容は、canvasへ描画した内容をSVGへ取り込んでいるだけでSVGのパスデータへ変換しているわけではないのですか？

[CanvasをSVGで利用する方法](http://nmi.jp/archives/216)


CC BY-SA 4.0
2020-06-27T04:19:24.613
68050
2020-06-27T10:21:56.600
2020-06-27T07:59:29.107
3060
7886
question
svg html5-canvas
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか？


「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。

[Method to convert HTML5 canvas to
SVG?](https://stackoverflow.com/q/8571294/9014308)

[Fabric.js](http://fabricjs.com/)というのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。

> Fabric.js is a powerful and simpleJavascript HTML5 canvas library  
>  Fabric provides interactive object model on top of canvas elementFabric
> also has SVG-to-canvas (and canvas-to-SVG) parser
>
> Fabric.jsは、強力でシンプルなJavascript HTML5キャンバスライブラリです。  
>  Fabricは、canvas elementFabricの上にインタラクティブなオブジェクトモデルを提供します。Fabricには、SVG-to-
> canvas（およびcanvas-to-SVG）パーサーもあります。

また[gliffy/canvas2svg](https://github.com/gliffy/canvas2svg)というのもあるようです。

> This library turns your Canvas into SVG using javascript. In other words,
> this library lets you build an SVG document using the canvas api.  
>  We create a mock 2d canvas context. Use the canvas context like you would
> on a normal canvas. As you call methods, we build up a scene graph in SVG.
>
> このライブラリは、JavaScriptを使用してCanvasをSVGに変換します。 つまり、このライブラリーでは、canvas
> APIを使用してSVGドキュメントを構築できます。  
>  模擬2Dキャンバスコンテキストを作成します。 通常のキャンバスと同じように、キャンバスコンテキストを使用します。
> メソッドを呼び出すと、SVGでシーングラフが作成されます。

あと古いようですが、[canvas-svg](https://code.google.com/archive/p/canvas-
svg/)と逆の[canvg/canvg](https://github.com/canvg/canvg)というのもあるようですね。  
canvas-svg

> This is a set of related components that make canvas and SVG play together
> more. Notably, it allows you to save a canvas 2D context as SVG, and to have
> an SVG mirror of a canvas context.  
>  これは、canvasとSVGをより連携させる関連コンポーネントのセットです。
> 特に、キャンバスの2DコンテキストをSVGとして保存し、キャンバスコンテキストのSVGミラーを持つことができます。

canvg

> JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG
> file or the text of the SVG file, parses it in JavaScript and renders the
> result on Canvas.  
>  Canvas上のJavaScript SVGパーサーおよびレンダラー。
> SVGファイルのURLまたはSVGファイルのテキストを取得し、JavaScriptで解析して、結果をCanvasにレンダリングします。

* * *

ちなみにMDNにSVG教本があり、[基本的な図形](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Basic_Shapes)とか[パス](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths)とか説明されています。  
他に基本的な図形からパスへの変換は、以下の記事でIllustratorで出来るとか、そういうサービスのWebサイトがあるとかなので、頑張れば出来るか上記ライブラリの中に機能があるかするのでしょう。

[How to convert a circle to a
path?](https://graphicdesign.stackexchange.com/q/82491)

> For example, when I save an SVG from illustrator and view the code, I see a
> <circle> element, for example, but I'd like for it to be a <path> element,
> not a <circle> element.  
>  How can I change it to be a path element?  
>
> たとえば、IllustratorからSVGを保存してコードを表示すると、たとえば<circle>要素が表示されますが、それを<circle>要素ではなく<path>要素にしたいと考えています。  
>  どうすればパス要素に変更できますか？

> **One solution** : In Illustrator, select your circle and choose Object >
> Compound Path > Make.  
>  **1つの解決策** : Illustratorで円を選択し、[オブジェクト]> [複合パス]> [作成]を選択します。

以下はどこかに英語版の元記事がありそうですが。  
[svgのpolygon,
polylineをpathに変換する方法](https://www.creamu.co.jp/blog/technology/2019/12/svg_polygon_polyline_path.html)

> svgの線／塗り（stroke /
> fill）のアニメーションをしたい場合、パスにする必要があり、ポリゴン／ポリラインだとうまくいきません。polygon,
> polylineをpathに変換するには、以下サイトから行います。
>
> [Convert SVG Polygon to Path](https://codepen.io/michaelschofield/pen/gKpef)
>
> HTMLにsvgタグをペーストして、下の空白の部分をクリックし、Chromeデベロッパーツールでsvgタグをコピーして使用します。

これらの記事とかも何か出来そうです。  
[Convert SVG polygon to path](https://stackoverflow.com/q/10717190/9014308)  
[svgのpolygonのpointsをpathのdとして扱う](https://qiita.com/yoshiiiiie/items/abe30977e86779999c2f)

* * *

それからPathの簡略化のような機能が必要では？ と思ったので探してみたら、使えるかどうか不明ですがズバリの名前の物とか有りました。

[mourner/simplify-js](https://mourner.github.io/simplify-js/)

> Simplify.js is a high-performance JavaScript polyline simplification library
> by Vladimir Agafonkin, extracted from Leaflet.
>
> Simplify.jsは、リーフレットから抽出された、Vladimir
> Agafonkinによる高性能JavaScriptポリライン簡略化ライブラリです。

類似なのかどうなのか、Paper.jsというのもあるようです。  
[Simplifying SVG path in
javascript](https://stackoverflow.com/q/39218265/9014308)

> Does anybody know a js library/algorithm for optimizing SVG path? I need to
> optimize paths only (reduce number of nodes). My path is autogenerated and
> is full of beziers, so simplify.js mentioned in a similar question won't
> fit. I'm also required to use browser, so node-backed modules won't fit too.
>
> SVGパスを最適化するためのjsライブラリ/アルゴリズムを知っている人はいますか？ パスのみを最適化する必要があります（ノードの数を減らします）。
> 私のパスは自動生成され、ベジェでいっぱいなので、同様の質問で言及されたsimplify.jsは適合しません。
> また、ブラウザーを使用する必要があるので、ノード・ベースのモジュールも適合しません。

> Finally used paperjs. Unfortunately they don't support modular builds yet.  
>  最後にpaperjsを使用しました。 残念ながら、それらはまだモジュール式ビルドをサポートしていません。

[Paper.js](http://paperjs.org/)

* * *

なお「パターン適用」は逆に簡単かもしれません。  
以下のような記事があり、適用したいパスで`.getPointAtLength(n)`するとポジションを取得出来るようです。

[Implement Div objects on SVG
path](https://stackoverflow.com/q/26850265/9014308)  
[Placing and rotating svg elements along a path with
Snap.svg](https://stackoverflow.com/q/27132114/9014308)

* * *

ついでに日本語のまとめ記事もあるようです。  
[SVGを使うときに知っておくといいことをまとめました](https://qiita.com/manabuyasuda/items/01a76204f97cd73ffc4e)


CC BY-SA 4.0
2020-06-27T07:43:27.020
68054
2020-06-27T10:21:56.600
2020-06-27T10:21:56.600
26370
26370
68050
answer