How can I remove redundant vertical space in SVG diagrams created with asciidoctor-fopub

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

How can I remove redundant vertical space in SVG diagrams created with asciidoctor-fopub

hnakamur
Hello, I created an example for embedding SVG images in asciidoc documents and generating a pdf file using asciidoctor-fopub.
However the diagrams in the output pdf contains redundant vertical space.
I'd like to remove it.
Could you help me to remove it?

I created an example project on github.
Source: https://github.com/hnakamur/asciidoctor-fopub-embed-svg-example
Output pdf: https://hnakamur.github.io/asciidoctor-fopub-embed-svg-example/class_diagram.pdf

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: How can I remove redundant vertical space in SVG diagrams created with asciidoctor-fopub

mojavelinux
Administrator
The problem here is not with the toolchain but with the SVG itself. The SVG defines a viewbox, but it doesn't not define a fixed height and width. Therefore, the height is determined automatically by the total space needed to layout all the graphics, which can include a lot of unused whitespace. To fix this problem, simply add the following attributes to the root <svg> element in the SVG document.

 width="441.0" height="265.5"

You can still scale the SVG. These values simply set the aspect ratio of the image. I chose these values because they match the width and height of the viewbox.

SVGs can be tricky. It's important to ensure they provide enough information for the PDF to lay them out correctly. It's always a safe bet to set the width and height explicitly...at least in my experience.

Cheers,  

-Dan

On Fri, Oct 31, 2014 at 6:55 PM, hnakamur [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hello, I created an example for embedding SVG images in asciidoc documents and generating a pdf file using asciidoctor-fopub.
However the diagrams in the output pdf contains redundant vertical space.
I'd like to remove it.
Could you help me to remove it?

I created an example project on github.
Source: https://github.com/hnakamur/asciidoctor-fopub-embed-svg-example
Output pdf: https://hnakamur.github.io/asciidoctor-fopub-embed-svg-example/class_diagram.pdf

Thanks!


To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

Re: How can I remove redundant vertical space in SVG diagrams created with asciidoctor-fopub

hnakamur
Hi, Dan

Thanks for your solution. It works great!
I updated my example files. Now there is no redundant space between the image and the following text.

* sources: https://github.com/hnakamur/asciidoctor-fopub-embed-svg-example
* pdf: https://hnakamur.github.io/asciidoctor-fopub-embed-svg-example/class_diagram.pdf
* html: https://hnakamur.github.io/asciidoctor-fopub-embed-svg-example/class_diagram.html

Cheers,

- Hiroaki
Reply | Threaded
Open this post in threaded view
|

Re: How can I remove redundant vertical space in SVG diagrams created with asciidoctor-fopub

mojavelinux
Administrator
Yeah!

-Dan

On Mon, Nov 3, 2014 at 6:46 PM, hnakamur [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi, Dan

Thanks for your solution. It works great!
I updated my example files. Now there is no redundant space between the image and the following text.

* sources: https://github.com/hnakamur/asciidoctor-fopub-embed-svg-example
* pdf: https://hnakamur.github.io/asciidoctor-fopub-embed-svg-example/class_diagram.pdf
* html: https://hnakamur.github.io/asciidoctor-fopub-embed-svg-example/class_diagram.html

Cheers,

- Hiroaki



To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--