Re: Using SVG in DITA? #SVG


Mica Semrick
 

Hey Dan,

Are you setting the viewbox or width and height on the root svg element? That'd be the proper way to size it:

<svg viewBox="0 0 120 120" width="120" height="120">...</svg>


On April 16, 2020 9:22:17 AM PDT, Dan Vint <dvint@...> wrote:
I'm trying to writeup guidelines for using graphics for our writers. I 
think I have a process identified for making sure that a PNG file will
reproduce properly in HTML and PDF output - trick is to make sure the
dpi is set that corresponds to the number of pixels in the image. Note
that I'm just using this with and <image> element and none of the SVG
specific markup.

I'm now trying to create the corresponding process for SVG images. Our
primary tool is Lucidchart for creating vector art. I've then been using
Inkscape to try and verify the results and loading directly into Chrome.

So in Lucid chart I have specified a 6x8in image and export that to SVG.
When I place that in a topic I observe the following:
- With no other attributes set, the HTML is ok but the PDF the image is
about 2x's too large and runs off the page
- If I use the scale or scalefit attribute the image is not changed in
the html, but it does work for the PDF

I have a different little icon, 1.5x1.5in, when I look at it in
Inkscape. I see the following:
- with no attributes set in HTML it fills out to be a full width object
instead of being small.

Other things I have tired include trying to work around limitations of
imagemaps and graphics. I have drawing a small flowchart and linked the
boxes to a variety of external webpages in Lucidchart. I observe:
- loading image in Chrome the links work perfectly
- Putting this same image in a topic and producing the HTML, the links
do not work. What really surprised me, was that same image in the PDF,
the links did work!

I've been googling around DITA and SVG and have not really found
anything addressing the results I have seen. Are people not using SVG in
DITA? In the past I avoided SVG just because I could never guarantee
that the image I exported was the image that would appear on the web. I
haven't tried to verify the stability of the format (our tools) this
time and went to testing more on how well it worked with DITA.

Has anyone been successful in making SVG graphics work consistently in
DITA? Do you have any guidelines you can share? In particular I'm
looking for:
- what elements in the svg actually control the page scaling such that
if those numbers are correct that the image appears properly without
setting attributes in the DITA markup
- do scale/scalefit work for you in HTML output? Either the OT is not
applying these values or something about the browser use is ignoring
those values in the HTML
- are you able to make links in SVG work? I did find some articles on
issues here. It seems that if you have links to other SVG pages that
those pages are not being copied to the output folder. Also saw
something that indicated there might be an issue with linking to topics
in the same publication. This is actually what I plan to do is link the
various process blocks to steps or sections in the same topic to connect
the workflow view to the specific steps required to accomplish the step.
- what tools are you using to create SVG graphics? I'm finding Inkscape
a little awkward to use, and doesn't seem to help. Lucidchart is ok but
I'm not sure if it is good at writing SVG results. I'm thinking about
trying Adobe illustrator to test the results - it seems like a
sledgehammer for our use. Anything else I should be looking at?

At this point I'm about to give up and just have the writers create a
PNG from Lucidchart.

..dan
Groups.io Links: You receive all messages sent to this group.

View/Reply Online (#45379): https://dita-users.groups.io/g/main/message/45379
Mute This Topic: https://groups.io/mt/73058001/2985651
Group Owner: main+owner@dita-users.groups.io
Unsubscribe: https://dita-users.groups.io/g/main/leave/defanged [mica@...]

Join main@dita-users.groups.io to automatically receive all group messages.