【Draw.io】図をSVGにエクスポートしWEBページに埋め込む
こんにちは。今回はDraw.ioで作図した図形をSVGにエクスポートする方法を解説したいと思います。SVGは拡大縮小しても画質が劣化することがないため、レスポンシブなページに埋め込むときにはメリットが多い形式です。Draw.ioで作図した図をホームページやWikiに埋め込みたいという方、必見です。
SVGにエクスポートする方法
Draw.ioで作成した図をSVGにエクスポートする方法は実にシンプルです。
まずはエクスポートしたい図を表示しておきます。次に画面上部のメニューから[ファイル]>[形式を指定してエクスポート]>[SVG]の順にクリックします。ダイアログが開くので[エクスポート]をクリックします。あとはSVGを名前を付けて保存すれば完了です。
SVGをサイトに埋め込んでみる
エクスポートしたSVGをサイトに埋め込んでみましょう。SVG形式の画像をテキストエディタで開くと、SVGのデータがsvgタグでマークアップされているテキストデータであることがわかります。すべて選択してコピーし、サイトのHTML内に張り付けましょう。
実際、このブログにも作成した図を埋め込んでみました。以下が埋め込んだ図です。
まとめ
いかがでしょうか。簡単にSVGを作成してWEBサイトに埋め込むことができました。技術的なドキュメントをHTMLで書く際には図解が必要になることもあるかと思います。その際は是非Draw.ioで図を作成し、SVGをページに埋め込んでみてはいかがでしょうか。