SVG images distorting on export to Basic HTML

[Bre-ASC]

I am working in FrameMaker 2022, version 17.0.3.546. We export our files from FrameMaker to BasicHTML using the Publish option. Any images that we have added drawn arrows to are distorting when the program outputs them to SVG (see examples below). 

1) How can I stop this from happening? It primarily appears to be an issue with curved arrows, but it's possible straight arrows and other shapes are still distorting, just not as obviously. 

OR 2) Is there a way to change the Publish settings so these images are NOT converted to SVG? 

Original

SVG output

[Jeff_Coatsworth]

What format are the images in? Are the arrows and text all part of the image or are they added separately? Are the images coming into FM as references or copied into it?

[Bre-ASC]

They are usually .png or .jpg. None of our images are .svg originally. All the arrows and text are add separately using the tools in FrameMaker. Images are copied in.

[Jeff_Coatsworth]

You might get better results if the images were "complete" before bringing them into FM - do all your edits in an external program and then import them by reference into the anchored frame in FM.

[Bre-ASC]

We need to be able to edit them from year to year, so while that is an option, it's not an ideal solution.

[Jeff_Coatsworth]

Are things being preserved if you output to HTML5 instead of the Basic HTML?

[Bre-ASC]

No, I get the same issue with the images that are being converted to SVG. (We also can't use HTML5 with our LSM.)

[Bob_Niland]

re: They are usually .png or .jpg. None of our images are .svg originally. All the arrows and text are add separately using the tools in FrameMaker. Images are copied in.

I'd suspect a couple of different potential problems here:

1. It relies on all downstream clients understanding the size of the raster objects relative to the added vectors & text.
2. It might be presuming that FM vector art (FrameArt) gets exported to HTML as vector (which it might, in some later releases).

When I'm faced with rendering raster to HTML output, I normally compose the whole thing in a vector editor like Illustrator. Open the raster. Expand artboard to extents (plus extra space needed). Add vector & text elements. Save complete object to SVG with attention to how the text survives (and convert to outlines if it doesn't).

[Bre-ASC]

I don't have access to a program like Illustrator, so need a solution that can be achieved within FrameMaker.

[Bob_Niland]

re: I don't have access to a program like Illustrator, so need a solution that can be achieved within FrameMaker.

• Because your annotated objects contain raster images, one approach might be to compose the whole thing in FM, and then perform a screen grab (or PDF extraction) of the completed image, to use in the final document.
• There are a number of no-charge open-source vector editors out there. I've not used any, but just taking a look at the most prominent of them, it appears that it can handle importing rasters, and adding vectors and text to it.

Of course, if you need to populate callouts by Xref, or have them be hypertext, or at least be selectable text, whole different challenge.

[Bre-ASC]

Yes, I realize there are other solutions for creating the images that would avoid the problem, but I'm looking for a way to fix the HTML export from FrameMaker without having to redo or replace all the images.

[Bob_Niland]

re: …but I'm looking for a way to fix the HTML export from FrameMaker without having to redo or replace all the images.

I'm beginning to wonder if you're dealing with an actual bug here. I just did a test in FM2020, of a simple document with an Anchored Frame containing an FM rectangle, ellipse, line of Graphics Text, and an imported .png {raster} icon, output as basic HTML using the Publish path.

It worked without apparent issues. Everything in the AF was exported as a single {external} .svg. The FrameArt became SVG vector objects. Positioning was undisturbed.

[Jeff_Coatsworth]

I think you're going to have to look at investing in something like that, because FM isn't really strong on image manipulation - long form publishing is its forte.

[FrameMaker-dk]

I need to understand this properly... when I look at the images you have posted, it seems to me that it is the arrows that is the problem? Top image looks right, bottom image has problem with distorted arrows. Is that right? The other graphics in the bottom image looks unchanged?

[Bre-ASC]

Yes, that's correct. Just the arrows that were added directly in FrameMaker, and only when FrameMaker converts the image to SVG when publishing to HTML (it's fine in PDF and Microsoft HTML Help formats, for example).

[Jeff_Coatsworth]

Are you finding what Bob reports - it all coming out in a single SVG file?

[Bre-ASC]

I get the full image output as a single SVG. It looks like I'm also getting a PNG of just the raster part of the image, but that's not linked in the HTML file at all.

[FrameMaker-dk]

Thanks for the clarification. I ran a test myself and I get the same results. It looks to me like the error is about degrees. Meaning... if you draw an arrow curve with a 45 - 90 degree slice, this are going to work. But if the degree between arrow and line becomes much small, FrameMaker can't figure out how to render the curve.

Here is the (wrongly) renderede html

And here is the composition in FrameMaker.

As can be seen, there is some sort of relation ship between the curve, the arrow and the poor rendering.

I am not smart enough to tell what is wrong, but it seems you may be able to avoid the poor rendering with a bit of practice on how to make curves that don't prompt the poor rendering. A workaround 🙂

[Bre-ASC]

Thank you for confirming it's not just me! If you look closely, it's not just the angle of the arrowhead. Where the arrows land has also shifted - the arrow very top left lands in the blue in the HTML but in the yellow in the original, for example. So just changing the curve won't really solve the issue if I'm pointing to something very specific (which is what we do often). I'm talking hundreds of images, so fixing the output in the first place is what I'm really hoping for, rather than adjusting all those images.

[FrameMaker-dk]

Yes, I can see that on closer inspection. I have been playing around with the problem some, but I shall have to agree with others in this thread, the the most predictable results will come from doing the entire drawing in one, external program. AND reporting the issue on the Adobe tracker.