Skip to main content
N
Nobat5C29
Inspiring
May 10, 2022
Question

after place svg and pdf export file do not look like it shoud

  • May 10, 2022
  • 7 replies
  • 4078 views

Der community,

i create an .svg File by script. In the end it will be placed automatically. If i open it in browser, it is looking fine. If i place it in InDesign, my preview is not correct, because it is rotated. If I export an PDF it looks more damage then the InDesign preview. It is an bug in InDesign, or it is my code not correkt for interpreting for indesign correct? There is no documentation for that by adobe.
I use svg in more grafics, and svg is usualy working in InDesign

 

thanks.

 

Here is my svg Code:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     viewBox="-318.309886183791 -318.309886183791 636.619772367581 636.619772367581"
     width="636.619772367581" height="636.619772367581">
<style>
    circle {
        stroke-width: 318.3098861837907;
        fill-opacity: 0;
    }
    text {
        text-anchor: middle;
        stroke: black;
        stroke-width: 1px;
        alignment-baseline: middle;
    }
    .d {
        stroke: #F20039;
    }
    .i {
        stroke: #FDC400;
    }
    .sg {
        stroke: #23BC92;
    }
</style>
<circle class="d" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="250" stroke-dasharray="500 500" />
    <text x="200.0" y="0.0">50%</text>
<circle class="sg" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="750" stroke-dasharray="400 600" />
    <text x="-200.0" y="2.4492935982947064E-14">50%</text>
<circle class="i" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="350" stroke-dasharray="100 900" />
    <text x="-50.0" y="-120.0">10%</text>
</svg>
This topic has been closed for replies.

7 replies

L
Community Expert
LaubenderCommunity Expert
Community Expert
May 11, 2022

Hi Nobat5C29,

to work-around all the issues you currently have with pie charts I would look after a different method for doing the circle segments. Do not use stroke-dashoffset and stroke-dasharray. Means, do not calculate the segments with dashed strokes, but with a path description of every segment. I know, it's easier to do this with dashed strokes, but this method is not helpful for now and in the foreseeable future…

 

Regards,
Uwe Laubender

( ACP )

N
Nobat5C29Author
Inspiring
May 18, 2022

We solved it now with stroke-dashoffset and stroke-dasharry, place the svg wit 0,001% not in square, and put the labeling in the potision, in witch InDesign rotate the piechart after export. It is a good workarround for us. I needed a quick solution for that, and we can life with that, but it is definitely a bug if you place the svg as a square.
Thank you for your Answers. It was helpfull.

L
Community Expert
LaubenderCommunity Expert
Community Expert
May 18, 2022

Hi Nobat5C29,

thank you for that. Could you share the new SVG code for that?

Another idea: Have two SVG graphics. One for the pie chart and another one for the labeling.

Rotate the pie chart in InDesign.

 

Thanks,
Uwe Laubender
( Adobe Community Professional )

L
Community Expert
LaubenderCommunity Expert
Community Expert
May 10, 2022

" but I'd like to see more experimentation before calling it an Adobe bug."

 

Fair points, James!

The following by far is no proof. Just a thought…

Supposed we do the following SVG code from the sample SVG of our OP here:

 

<circle class="d" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="0" stroke-dasharray="500 500" />

 

Just one single dashed stroke circle in red. We start the stroke at position 0 with stroke-dashoffset, the result in any of my browsers is this:

 

 

Now we place that SVG graphic in InDesign:

The start InDesign thinks the dashed stroke has to start could be 90° away in counter-clock direction.

Let's draw a circle the same size on top of the placed graphic with InDesign and run a script that gives us the indexes of all four path points from 0 to 3 of that InDesign circle object like that:

That makes clear that at least for InDesign the path of a circle starts at the bottom center and procedes in counter-clock direction. And here, I think, lies the bug with InDesign's interpretation mechanism for SVG circles and dashed strokes. InDesign thinks that the dashed stroke starts at the same point as its own circle elements.

 

Wheras for all browsers that I tested the start is at the left path point of the circle in counter-clock direction.

 

As I said, no proof, just some thoughts…

 

Regards,
Uwe Laubender

( ACP )

N
Nobat5C29Author
Inspiring
May 11, 2022

thank you for your Answers, we are checking more options. what realy a bug ist, if you place it in InDesign with the same x and y scaling. for example 50% 50% it looks like this after pdf export:

if you scale it in 50% 49,999% it look like this:

 

 

this is for shure a bug.
The rotation and the start point could be a bug, but why InDesign interpreted in not like all other viewers and browser. That is not nice. For me it is a bug too. I will report it. What Adobe do with that Informatin, we will see. 🙂

 

For some other questions: yes, I need svg and no other format, yes I need PDF interactive export. Other Options are not working with the overall concept.

    L
    Community Expert
    LaubenderCommunity Expert
    Community Expert
    May 10, 2022

    Note: Also opened your SVG in Google Chrome and Microsoft Edge browsers on Windows 10.

    The result is consistent with the rendition of the SVG in Firefox on Windows 10.

     

    Regards,
    Uwe Laubender

    ( ACP )

    L
    Community Expert
    LaubenderCommunity Expert
    Community Expert
    May 10, 2022

    Well, it seems that start position of a dashed stroke with Illustrator and also with InDesign is different to what we see from a browser's rendition. At least for circle elements. Could be a bug.

     

    PhotoShop is doing the same:

     

    So I would report a bug at InDesign UserVoice, Illustrator UserVoice and with PhotoShop as well.

    Seems to be a core issue in the SVG module of Adobe products.

     

    InDesign

    https://indesign.uservoice.com/

    Illustrator

    https://illustrator.uservoice.com/

    PhotoShop

    https://community.adobe.com/t5/photoshop-ecosystem/ct-p/ct-photoshop?page=2&sort=latest_replies&filter=all&lang=all&tabid=bugs

     

    Regards,
    Uwe Laubender

    ( ACP )

    James Gifford—NitroPress
    James Gifford—NitroPress
    Legend
    May 10, 2022

    I am not up to speed on SVG code (although I used to do things like hand-code Postscript graphics and have fair mastery of HTML5 graphics), so I can't say or meaningfully investigate anything here, but I'd like to see more experimentation before calling it an Adobe bug. Not in any way that I think CS handling of SVG is perfect 🙂 but I have seen so many problems with SVG and InDesign that I wonder if it's a more general, subtle coding error — forgetting to set a rotation basis, for example? Or an origin point? — that browsers are more forgiving of.

     

    If most SVG graphics created visually work fine in both worlds, I'd suspect some such point is being missed in generated/hand-coded ones. Worth looking into and documenting (I'll certainly take notes), but not necessarily an ID et al. flaw.

     

    —

    L
    Community Expert
    LaubenderCommunity Expert
    Community Expert
    May 10, 2022

    Hi Nobat5C29,

    saved your code to an SVG file on my Windows 10 machine.

    Previewed it in Firefox browser, placed it on an InDesign page with inDesign 17.2.1 on Windows 10.

    Exported that page to PDF with a PDF/X-4 export preset.

     

    Result: I see some of your issue.

     

    SVG opened with Firefox browser on Windows 10

     

    SVG placed in InDesign 17.2.1:

    And of course the exported PDF looks the same.

    The position of the text seems to be ok, but the underlying graphic is rotated.

     

    If the sole purpose of all this is to easily do a pie chart and to export it to PDF via InDesign you could put the code for the circles into a group and rotate that group like this:

    <g transform="rotate(90)">

<circle class="d" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="250" stroke-dasharray="500 500" />
<circle class="sg" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="750" stroke-dasharray="400 600" />
<circle class="i" cx="0.0" cy="0.0" r="159.15494309189535" stroke-dashoffset="350" stroke-dasharray="100 900" />

</g>

<text x="200.0" y="0.0">50%</text>
<text x="-200.0" y="2.4492935982947064E-14">50%</text>
<text x="-50.0" y="-120.0">10%</text>

     Of course a browser like Firefox would show it differently like the import module of InDesign.

     

    Edited SVG opened with Firefox browser on Windows 10:

     

    Edited SVG placed in InDesign 17.2.1:

     

    Regards,
    Uwe Laubender

    ( ACP )

    James Gifford—NitroPress
    James Gifford—NitroPress
    Legend
    May 10, 2022

    SVG is a problematic format, best used for web and EPUB. It gets more troublesome when written or coded by hand, just as with all web code where one subtle structural flaw can make it work in some apps and browsers and not others.

     

    I suggest you find a few sample SVGs of 'known quality' — that display fine in a web setting or other native uses — and see if the problems persist when used in your documents/exports in place of your hand-built ones. If they work... you need to improve the coding/generation of your SVGs.

     

    Also/alternatively, see if your SVGs display correctly on several browsers and in a simple EPUB export.

     

    —

    Willi Adelberger
    Community Expert
    Willi AdelbergerCommunity Expert
    Community Expert
    May 10, 2022

    What version InDesign?

    What PDF Viewer?

    —

    How does the svg look like if you open it in Illustrator?

    How does it work, if you open in Illustrator, resave as SVG and use that?

    Why do you use SVG? If it is print, use ai, if it is for EPUB, it is ok.

    N
    Nobat5C29Author
    Inspiring
    May 10, 2022

    PDF Preview tool is Acrobat Pro DC 2020.06.20034, but it does not matter. it is looking in Preview (OSX) same like in Acrobat. 

    Willi Adelberger
    Community Expert
    Willi AdelbergerCommunity Expert
    Community Expert
    May 10, 2022

    Version. InDesign and the other questions?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices