質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

6051閲覧

html5で生成したSVGデータをSVG形式で保存したい

suran

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/02/18 12:05

http://sterfield.co.jp/designer/html5%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3svg%E3%81%A8jquery%E3%81%A7%E3%81%8A%E7%B5%B5%E6%8F%8F%E3%81%8D.html

現在上記サイトのようにSVGで描画した絵をサーバー側に送信し、SVG形式で保存する処理を作りたいと思っています。

SVGデータをPNGで保存するような文献はあるのですが、SVG形式で保存する方法が見当たらないため、ご存知の方がいればご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

投稿2016/02/20 01:06

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

先に他の簡易な方法が投稿されているため削除しました

以下、編集履歴よりコピペ

SVGは、中身はXML形式なのでそのXMLの中身の文字列を、
サーバ側に送信してサーバ側では、その文字列をXMLファイルとして
必要なタグを補完するなどして、ファイル保存すれば、SVGファイルになると思います。
まったく動作を確認していませんが、以下のような仕組みのような
簡易な状態から試してみると良いのではないでしょうか。
・SVGファイル、htmlファイル内のsvg描画、サーバに送信(post)する
・サーバ側では、postされたときのパラメータを、保存して、XMLタグを補完する。
参考
http://d.hatena.ne.jp/dhrname/20070312/1173709775
http://memopad.bitter.jp/w3c/svg/svg_inhtml.html
http://dresscording.com/blog/svg/retina_svg.html
●SVG

<?xml version="1.0" encoding="UTF-8" ?> <svg height="850" width="850" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <script> </script> </defs> <g id="rectangle"> <rect height="100%" style="fill:#FFFFFF" width="100%" x="0" y="0"></rect> </g> </svg> ●html側 <div id="divSVG" value="0" > <embed name="nSVG" wmode="transparent" id="idSVG" style="position:absolute; top:0px; left:0px; z-index:1;" src="上記のSVGと過程" BGCOLOR=#ffffff> </div> embedやobjectでのhtmlに埋め込み post用のhiddenタグを用意 <form> <input type="hidden" name="nodeSVG"> </form> ●js var docSVG = idSVG.getSVGDocument(); var objSVG = docSVG.getElementsByTagName("svg").item(0); var str = idSVG.window; // ここの取得が不明瞭 document.form.nodeSVG.value = str.printNode(objSVG); document.form.submit();

もしくは
docSVGが文字列ならば、その文字列をhiddenにセットしてpostする

投稿2016/02/18 14:31

編集2016/02/27 09:30
kuniku

総合スコア253

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ogaaaan

2016/02/19 02:49

二次派生的に別の方が見たときに参考になる内容だったりすることもあると思うので、消さないでも良いとおもいます。 見てみたかったー。
think49

2016/02/19 02:55

ogaaaanさん、編集履歴から見られますよ。
suran

2016/02/20 12:03

編集前の部分を参考にさせていただきました
kuniku

2016/02/27 09:29 編集

消していたのですが、再度同じ内容でアップしておきます。
ogaaaan

2016/02/27 10:20

やったー!ありがとう!
guest

0

はい
ctx.toDataURL("image/svg+xml")

投稿2016/02/18 13:50

SF6

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suran

2016/02/19 02:42

ctxはコンテキストを示しているかと思いますが、 どのように使用するのでしょうか? svgタグを直接指定し、下記のようにしてみましたがいずれもスクリプトエラーでした。 <svg id="svg" ></svg> ① $('#svg').toDataURL("image/svg+xml") ② var context = $('#svg').getContext('2d'); context .toDataURL("image/svg+xml")
SF6

2016/02/23 09:14

間違えました、すみません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問