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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

Q&A

解決済

1回答

792閲覧

graphvizのdotプログラム: svgにおいて不適切なviewBoxが出力されるのを何とかしたい

KojiDoi

総合スコア13669

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

0グッド

0クリップ

投稿2018/07/24 18:52

編集2018/07/25 19:03

前提・実現したいこと

dot言語で書いた線画データをgraphvizパッケージのdotプログラムに与え、svgとpng形式の画像ファイルを作ろうとしています。
pngには問題がありませんが、svgのファイルをうまく生成できません。なぜか画像の右端が切れてしまうのです。

この現象を抑止するか、あるいは後処理で修正する方法を探しています。

発生している問題・エラーメッセージ

dot言語で書かれたデータin.dotを下記の要領でdotプログラムに与えると、

dot -Tpng -o out.png in.dot

下のようなpngファイルが得られました。これは想定通りの結果です。
イメージ説明

ところが、svgでの出力を試みると

dot -Tpng -o out.png in.dot

下のようになってしまいます(svgで出力したものを別ツールでpng化したもの)。右端が切れてしまっています。

イメージ説明

該当のソースコード

まず、dot形式によって書かれた元データを示します。

digraph maingraph { graph [ charset = "UTF-8", rankdir = "TB", nodesep = 0.05, ranksep = 0.1, dpi = 78, size = 5 ]; node [ charset = "UTF-8", fontsize = 25, shape = box, style = filled, color = black, fillcolor = white, fontcolor = black ]; edge[ color = black, ]; "l2000:00:00:00:00:00" [label="ABCD"]; "B>2000:00:00:00:00:00" -> "C>2000:00:00:00:00:00" ; "B>2000:00:00:00:00:00" [ label="B" ]; "C>2000:00:00:00:00:00" [ label="C" ]; "r2000:00:00:00:00:00" [label="EFGH"]; {rank = same; "l2000:00:00:00:00:00"; "r2000:00:00:00:00:00"; "B>2000:00:00:00:00:00"; "C>2000:00:00:00:00:00"; }; }

dotプログラムが吐き出した問題のsvgファイルは以下のような内容となっています。

svg

1<?xml version="1.0" encoding="UTF-8" standalone="no"?> 2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4<!-- Generated by graphviz version 2.30.1 (20130214.1330) 5 --> 6<!-- Title: maingraph Pages: 1 --> 7<svg width="319pt" height="48pt" 8 viewBox="0.00 0.00 294.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 9<g id="graph0" class="graph" transform="scale(1.08333 1.08333) rotate(0) translate(4 40)"> 10<title>maingraph</title> 11<polygon fill="white" stroke="white" points="-4,5 -4,-40 291,-40 291,5 -4,5"/> 12<!-- l2000:00:00:00:00:00 --> 13<g id="node1" class="node"><title>l2000:00:00:00:00:00</title> 14<polygon fill="white" stroke="black" points="84.25,-36 -0.25,-36 -0.25,-0 84.25,-0 84.25,-36"/> 15<text text-anchor="middle" x="42" y="-12" font-family="Times New Roman,serif" font-size="25.00">ABCD</text> 16</g> 17<!-- B&gt;2000:00:00:00:00:00 --> 18<g id="node2" class="node"><title>B&gt;2000:00:00:00:00:00</title> 19<polygon fill="white" stroke="black" points="143,-36 89,-36 89,-0 143,-0 143,-36"/> 20<text text-anchor="middle" x="116" y="-12" font-family="Times New Roman,serif" font-size="25.00">B</text> 21</g> 22<!-- C&gt;2000:00:00:00:00:00 --> 23<g id="node3" class="node"><title>C&gt;2000:00:00:00:00:00</title> 24<polygon fill="white" stroke="black" points="201,-36 147,-36 147,-0 201,-0 201,-36"/> 25<text text-anchor="middle" x="174" y="-12" font-family="Times New Roman,serif" font-size="25.00">C</text> 26</g> 27<!-- B&gt;2000:00:00:00:00:00&#45;&gt;C&gt;2000:00:00:00:00:00 --> 28<g id="edge1" class="edge"><title>B&gt;2000:00:00:00:00:00&#45;&gt;C&gt;2000:00:00:00:00:00</title> 29<path fill="none" stroke="black" d="M143.188,-18C143.328,-18 143.468,-18 143.609,-18"/> 30<polygon fill="black" stroke="black" points="136.558,-21.5003 146.558,-18 136.557,-14.5003 136.558,-21.5003"/> 31</g> 32<!-- r2000:00:00:00:00:00 --> 33<g id="node4" class="node"><title>r2000:00:00:00:00:00</title> 34<polygon fill="white" stroke="black" points="286.25,-36 205.75,-36 205.75,-0 286.25,-0 286.25,-36"/> 35<text text-anchor="middle" x="246" y="-12" font-family="Times New Roman,serif" font-size="25.00">EFGH</text> 36</g> 37</g> 38</svg>

試したこと

svgデータ冒頭のviewBoxのxをエディタで400などと適当に大きい値に書き換えてやると正しく表示されるので、この部分の出力に問題があると分かります。

しかし解せないのは、

svgの末尾の方を見ると、私の理解が正しければEFGHのボックスのx座標は286.25と205.75である。ならばviewBoxのx座標も0から286.25としておけば全体が出力されるはずではないのか? dotプログラムが吐き出したviewBoxの値はその条件を満たしているように思われるが、実際は正しい結果とならないのはなぜなのか?

svgの仕様には詳しくない私は上記のようなレベルでしか問題を把握できず、行き詰っています。
ということで、この**「svgにすると右端が見切れる」現象の原因あるいは対策**に心当たりがある方がおられたら、お知恵を拝借したく思います。

よろしくお願いします。

補足情報(FW/ツールのバージョンなど)

dot - graphviz version 2.30.1 (20130214.1330)
windows 10 + CYGWIN_NT-10.0にて試行

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

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

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

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

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

guest

回答1

0

自己解決

どうもgraphvizのdotにはdpiを指定しつつsvgを作ろうとすると適切な値を返さないバグがあり、2011年から放置されているらしいです。
https://github.com/sverweij/atom-graphviz-preview-plus/issues/18

仕方ないので、周辺情報をもとにあとから強制的にsvgの中身を書き換えることで対処することにしました。

投稿2018/07/29 06:16

KojiDoi

総合スコア13669

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問