Topics

Using SVG in DITA? #SVG

Dan Vint
 

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

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@...]

Dan Vint
 

So the Lucidchart graphic had a height and width, the second file had a view box, but no height and width. These are generated files so I had hoped they would be doing the right thing.

Anyway I added the viewport to the Lucidchart image and removed the scalefit from the image tag. The image is too wide in the pdf. I reduced both the viewport and width with no change.



Sent from my Verizon, Samsung Galaxy smartphone


-------- Original message --------
From: Mica Semrick <mica@...>
Date: 4/16/20 10:07 AM (GMT-08:00)
To: main@dita-users.groups.io, Dan Vint <dvint@...>
Subject: Re: [dita-users] Using SVG in DITA?

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@...]

Dan Vint
 

I seem to be seeing that the height and width values are more important to getting the pdf size correct. If I enlarge those the image changes size. If I only change the values in the viewport or only have a viewport value than it shrinks



Sent from my Verizon, Samsung Galaxy smartphone


-------- Original message --------
From: dvint <dvint@...>
Date: 4/16/20 10:51 AM (GMT-08:00)
To: Mica Semrick <mica@...>, main@dita-users.groups.io
Cc: dvint@...
Subject: Re: [dita-users] Using SVG in DITA?

So the Lucidchart graphic had a height and width, the second file had a view box, but no height and width. These are generated files so I had hoped they would be doing the right thing.

Anyway I added the viewport to the Lucidchart image and removed the scalefit from the image tag. The image is too wide in the pdf. I reduced both the viewport and width with no change.



Sent from my Verizon, Samsung Galaxy smartphone


-------- Original message --------
From: Mica Semrick <mica@...>
Date: 4/16/20 10:07 AM (GMT-08:00)
To: main@dita-users.groups.io, Dan Vint <dvint@...>
Subject: Re: [dita-users] Using SVG in DITA?

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@...]