[SOLVED] How can I fix path data as circle in svg?

Issue

This Content is from Stack Overflow. Question asked by Serhat Morkoç

i have a problem, i convert the circles I drew to Autocad as high quality pdf, then I import this pdf with inkscape or corelDraw, my aim is to export this pdf as svg. No problems so far.

but circles in pdf appear as path not circle in svg. There are about 25 thousand flats, and showing it in svg as a path causes performance loss.

How can I fix path data as circle in svg?

<path d="M 837.5,0 C 837.5,462.53851 462.53851,837.5 0,837.5 -462.53851,837.5 -837.5,462.53851 -837.5,0 c 0,-462.53851 374.96149,-837.5 837.5,-837.5 462.53851,0 837.5,374.96149 837.5,837.5" id="path1932"/>



Solution

Later edit I can use 3 cmd lines for the above one drawing but each case will need different approach. In the end the solution was ever so simple for this one example.

The compressed pdf is 102,186 bytes but expanded to text.svg (mu draw -o drawing7.svg drawing7.pdf) that is 4 times larger 409,446 bytes

given that this is only part of one array entry at a range of co-ordinates

<g id="Layer-1" data-name="ust-tribun$0$BK-seats">
<path transform="matrix(.0299676,.0013944,.0013944,-.0299676,694.69509,1952.665)" stroke-width="0" stroke-linecap="butt" stroke-miterlimit="10" stroke-linejoin="miter" fill="none" stroke="#808080" d="M 837.5 0 C 837.5 462.5385 462.5385 837.5 0 837.5 C -462.5385 837.5 -837.5 462.5385 -837.5 0 C -837.5 -462.5385 -462.5385 -837.5 0 -837.5 C 462.5385 -837.5 837.5 -462.5385 837.5 0 "/>
<path transform="matrix .......

the fix is to reverse the multiple parts of the symbol into the now rescaled source definition
<circle ........ r="837.5"/>
it will reduce the file to a more binary relavent size of 312,568 bytes but beware all those invisible lines with stroke-width="0" should be changed too (it’s an all too common draughtsman error not to define their pen size).

Some background to the complexity of programmatically reversing vectors. Here I am illustrating using HTML in place of your DWG circle (so in one single hop) but we can see that on conversion to PDF the path instructions are translated the same as all other shape vectors into one of many paths. Your aim is to bulk reverse this process !

enter image description here

"WE" tend to think of two text letters as two instructions but in vectors that’s at least \/\/ |≡ where that last group is 3 separate paths, however for convenience the plain text in PDF is translated via ttf font look-up table (that themselves are like svg but SVG lettering fonts are generally not tolerated) One of those SVG letters in the picture is described as e.g. non reversible, thus using a big square O is not advisable.

So back to your question how to reverse a path to a circle will depend on the path being ALL ways the same string path format (or at least fairly consistent profiles).

So using text parsing method (you have still to show attempt) you need to pick out the arguments and back feed as parameters.

Use a typical test case of known size and position and determine the x and y values from the min and max then you can use the deltas for text substitution in <svg height="100" width="100"> the rest is then fairly simple since radius should be 𝛿x/2 and center should be minimum x + 𝛿x, minimum y + 𝛿y.

The fly in the ointment is how you translate your units so with no hard code to follow, in broad terms consider PDF origin like CAD is cartesian lower left and page units are usually converted using points as the measure so normally 1 point = 0.3527777777777778 mm

Your biggest problem is that the circle shown, inside the PDF will most likely be a series of vector chords. my sample has many small arcs but for your added sample see lower.

/GS0 gs
.24 0 0 -.24 -319.87684 182.32659 cm
1369.325 478.326 312.631 312.631 re
W*
n
3.126313 0 0 3.126313 1369.3252 478.32597 cm
90 50 m
90 51.31 89.936 52.617 89.807 53.921 c
89.679 55.224 89.487 56.519 89.231 57.804 c
88.976 59.088 88.658 60.358 88.278 61.611 c
...
87.457 35.903 87.897 37.135 88.278 38.389 c
88.658 39.642 88.976 40.912 89.231 42.196 c
89.487 43.481 89.679 44.776 89.807 46.079 c
89.936 47.383 90 48.69 90 50 c
h
0 0 0 rg
f
Q

on inspection of the sample it appears the circles are common for CAD output as 4 quarters so compare how Inkscape has reversed this PDF 4 arcs to SVG

q
-0.06113 -0.99813 0.99813 -0.06113 27455.5 34627.5 cm
837.5 0 m
837.5 462.53851 462.53851 837.5 0 837.5 c
-462.53851 837.5 -837.5 462.53851 -837.5 0 c
-837.5 -462.53851 -462.53851 -837.5 0 -837.5 c
462.53851 -837.5 837.5 -462.53851 837.5 0 c S
Q

so similar values to provided Inkscape’s SVG conversion

<path d="M 
837.5,0 C 
837.5,462.53851 462.53851,837.5 0,837.5 
-462.53851,837.5 -837.5,462.53851 -837.5,0 c 
0,-462.53851 374.96149,-837.5 837.5,-837.5 
462.53851,0 837.5,374.96149 837.5,837.5" id="path1932"/>

Short answer

don’t embed SVG in PDF if at all possible nor expect to reverse easily. I think those arcs are going to be a problem in conversion it is do able but the svg modified in MS notepad looks good enough as it is.

enter image description here

It is just one line of code to transform the PDF to SVG with no changes.
One line of code to rectify the line thickness omission problem
But it would need many reams of code to convert 4-16 arcs into one circle.
Then reams more to do it for another drawing scale and layout.
The text manipulation could be done by whatever program you are familiar with, I use MS Notepad and CMD because I always find them reliable for hand editing. And cmd is good for basic text parsing, but for bulk programming you need MB of coding in a maths biased application.

anyway the text substitution is

d="M 837.5 0 C 837.5 462.5385 462.5385 837.5 0 837.5 C -862.5385 837.5 -837.5 462.5385 -837.5 0 C -837.5 -462.5385 -462.5385 -837.5 0 -837.5 C 462.5385 -837.5 837.5 -462.5385 837.5 0 "

using a simpler arc d="M -837.5,0 A 837.5,837.5 0 1,1 -837.5,0.001"

or better yet just replace with

r="837.5" and change the corresponding line start from <path to <circle but only for those array lines

enter image description here


This Question was asked in StackOverflow by Serhat Morkoç and Answered by K J It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?