I have the following .svg file:
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="100cm" version="1.1" width="200cm" xmlns="http://www.w3.org/2000/svg">
<rect fill="rgb(61, 136, 199)" height="1.0cm" opacity="1.0" transform="rotate(45.0,181.45,181.45)" width="3.0cm" x="0.3144999999999999cm" y="1.3145cm" />
<circle cx="1.8145cm" cy="1.8145cm" fill="rgb(255, 0, 0)" opacity="1.0" r="0.025cm" />
</svg>
which displays like follows:
However, I want the rectangle to rotate around the red circle like this:
The Mozilla svg docs state:
The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. [...] If optional parameters x and y are supplied, the rotate is about the point (x, y).
Given that the circle's coordinates are cx="1.8145cm" cy="1.8145cm" and the rotation point of the rectangle is 181.45,181.45, why doesn't the rectangle rotate around the circle?
Note: Changing the rotation point to 1.8145, 1.8145 doesn't change anything.
Because rotating around 1.8145, 1.8145 (or in other words 1.8145px, 1.8145px) is not the same as rotating about 1.8145cm, 1.8145cm. px and cm are different units.
The transform attribute does not allow coordinates with units, so you will need to convert your centimetre values to pixels.
There are 2.54 cm per inch and 96 px per inch. So to convert between them, you will need to multiply your cm values by (96/2.54)
1.8145 * 96 / 2.54 ~= 68.58
So the SVG should be:
<svg baseProfile="full" height="100cm" version="1.1" width="200cm" xmlns="http://www.w3.org/2000/svg">
<rect fill="rgb(61, 136, 199)" height="1.0cm" opacity="1.0" transform="rotate(45.0,68.58,68.58)" width="3.0cm" x="0.3144999999999999cm" y="1.3145cm" />
<circle cx="1.8145cm" cy="1.8145cm" fill="rgb(255, 0, 0)" opacity="1.0" r="0.025cm" />
</svg>
Related
In SVG, I'm trying to draw a circle centered at the same position of an embedded png icon.
svg circle is positioned with cx and cy attributes
image is positioned with x and y attributes
Could those values, x and cx, y and cy, be expressed in the same unit, like pt ?
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5">
<circle stroke="blue" stroke-width="3" cx="131.31pt" cy="455.9pt" r="74.34" fill-opacity="0.1" />
<image x="131.31pt" y="385.6pt" xlink:href="data:image/png;base64,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" />
</svg>
Thanks in advance.
Since the width and the height of the svg element are in pts and you have a viewBox width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5", you can use user units (no units) and everything in the svg element will be in pts. User units are units in the current user coordinate system.
In order to center the image in the middle of the circle you need to place it at x = cx - 12 and y = cy - 12 where cx and cy are the coords for the center of the circle and 12 = 24/2; 24 beeing the width and height of the image.
In order to know the width and the height of the image you can use the getBBox() method.
console.log(img.getBBox())
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5">
<circle stroke="blue" stroke-width="3" cx="131.31" cy="455.9" r="74.34" fill-opacity=".1" />
<image id="img" x="119.31" y="443.9" xlink:href="data:image/png;base64,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" />
</svg>
I am trying to analyse data in a SVG file I exported from coreldraw.
It is actually a file with a regular black colored 40x40 rectangle AND also the same 40x40 rectangle rotated 10 degrees and colored in red.
If I look at the SVG contents , then I can nicely see my 40x40 black rectangle and the line under it is the red rotated one.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW Home & Student X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 100 100"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.str0 {stroke:black;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round}
.str1 {stroke:red;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round}
.fil0 {fill:none}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0 str0" x="15" y="19" width="40" height="40"/>
<rect class="fil0 str1" transform="matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)" width="44.6985" height="40.9736"/>
</g>
</svg>
But.....
The red rotated one has no X or Y parameter specified. I read through some docs and think that this means that they are by default 0
Both the black original rectangle and the red rotated version have exactly the same size , but the red one is rotated by 10degrees.
If I look at the width and height of the red rectangle, then I see a width of 44.6985 and height of 40.9736 and that makes no sense to me at all.
It is a rectangle, so its height and width should be exactly the same. Even if you rotate it. I do also know that the rectangle will use more horizontal and vertical pixels of rotated by 10 degrees, but even then it should be the same number.
This makes me think that these values got somehow scaled in a non uniform way, but I can't imagine how I should calculate the correct width and height based on this info.
Grafical editors have sometimes quite obscure algorithms for what they consider optimizing. What CorelDraw did here was to exchange the square for a rectangle in a different place and with unequal side lenghts 44.6985 × 40.9736, and then apply a matrix that not only rotates and translates the rectangle, but also scales it non-uniformly back to a 40 × 40 square. Why? Ask Corel.
The matrix used by them is
matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)
and is equivalent to (computed with and rounded a bit from this online tool)
translate(11.5017 22.5159) rotate(-10) scale(0.894884 0.976238)
A (counter-clockwise!) rotation of the square around the same center would be written as
rotate(-10 33.3443 40.7508) //or
translate(-6.56971 6.40931) rotate(-10)
which is equivalent to
matrix(0.984807 -0.173648 0.173648 0.984807 -6.56971 6.40931)
You might contrast this with how Inkscape writes the same rotation. It writes out the rotation legibly, but moves the origin to somewhere else:
<rect x="7.41712" y="24.1711" width="40" height="40" transform="rotate(-10)" />
The SVG attribute viewBox appears to be inconsistent. It seems it doesn't scale all SVG graphics primitives the same way. Here's a sample SVG file that has a rectangle, a circle, a polyline, and a polygon. The rectangle has been properly scaled and almost filled the viewPort (which has a width of 500 and a height of 500).
Please see the SVG code and image it produced below. As you will notice the polyline, polygon, and circle did not scale to fill the view port. They do (consistently) occupy the top-left quarter of the view port though (moved but retaining the original size). Can anyone please throw some light on what's going on with this? I will greatly appreciate your feedback.
<?xml version='1.0' encoding='utf-8'?>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
height='499' width='501' viewBox='100 100 200 200'>
<g stroke='BLACK' stroke-width='5' fill='none'>
<rect x='105' y='105' width='193' height='193'/>
<polygon points="150,100 200,200 100,200" style="stroke:purple" />
<polyline points='115,180 155,127 180,180' stroke='red'/>
<circle cx='150' cy='150' r='50' stroke='green'/>
</g>
</svg>
Short answer:
The SVG attribute viewBox on the sample code does scale all SVG graphics the same way; so the smaller object representations are actually smaller objects.
Explanation:
It's useful to look at he viewBox documentation to better understand the calculations. Let's try to go through you sample code step-by-step:
the SVG viewport dimensions are set to 501 by 499 (width by height)
the viewBox attributes are set as
100 for min-x and min-y, which will act like shifting the position of the viewport before its container top and left positions (which in the image it seems like irrelevant, since you also shifted all the coordinates by 100; see my note below)
200 for width and height, which will represent 100% of the viewport size (in this case ~500px); in other words, the 200 value in any children will be mapped (scaled) into ~500px
the rect has 193 as width and height, which is nearly 200, this makes it occupy almost all of the ~500px by 500px viewport area
the other items are scaled properly, but they seem smaller because, in fact, they are smaller
e.g. the circle has r='50' which would fit an imaginary outer square of 100 by 100; 100 is 50% of 200, so it is scaled to ~250px by ~250px (250 = 50% of 500); that is why the circle seems to use 1/4 of the area
the same idea is applied to the other graphic elements.
NOTE:
I found it was easier to understand the final results if there was no shift on the viewport and on the positioning coordinates. So, removing 100 from viewBox > min-x and min-y (step 2.1 above) and from all the positioning attributes would make this code easier to understand:
<?xml version='1.0' encoding='utf-8'?>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
height='499' width='501' viewBox='0 0 200 200'>
<g stroke='BLACK' stroke-width='5' fill='none'>
<rect x='5' y='5' width='193' height='193'/>
<polygon points="50,0 100,100 0,100" style="stroke:purple" />
<polyline points='15,80 55,27 80,80' stroke='red'/>
<circle cx='50' cy='50' r='50' stroke='green'/>
</g>
</svg>
The svg file: http://pastebin.com/8N61VpS1
<rect
style="fill:#000000"
id="rect3409"
width="166.39345"
height="180.32787"
x="77.049179"
y="611.37854" />
The rectangle "rect3409" has coordinates (x,y) = (77.049, 260.656) in Inkscape 0.91 r13725.
However, the tag <rect> with id rect3409 has (x, y) = (77.049, 611.379). Why are there differences between the two?
I want to get the correct SVG coordinate of the rectangle. How do I do that?
If you look at the source, you'll see that #rect3409 has a parent g element:
<g transform="translate(0,-452.36216)">
<!-- snip -->
<rect
id="rect3409"
width="166.39345"
height="180.32787"
x="77.049179"
y="611.37854" />
</g>
The transform=translate(tx, ty) attribute on the g is applied to the dimensions of #rect3409. So the vertical axis of the rect goes from y + ty to y + h + ty, which is 611 - 452 == 159px to 611 + 180 - 452 == 339px. I think these are the "correct SVG co-ordinate" values you want.
But Inkscape is not reporting these values, but rather 261px to 441px. It seems like Inkscape is actually flipping the y axis: in SVG (and conventionally in all computer graphics) y=0 is at the top of the screen, and y increases as you move down the screen. For example, the following SVG displays a red box above a blue box:
<svg>
<rect x="0" y="0" width="10" height="10" fill="red" />
<rect x="0" y="10" width="10" height="10" fill="blue" />
</svg>
In Inkscape, however, you have the mathematical convention of y=0 at the bottom, and y increasing as you go upwards. Therefore, the co-ordinates you see in Inkscape are modified from the "true" SVG co-ordinates (thanks #squeamish ossifrage for pointing this out in the comments): y_Inkscape = h_image - y_SVG, where y_Inkscape is what Inkscape tells, you, y_SVG is what's in the file, and h_image is the total image height.
Your sample image is exactly 600px high, so the "Inkscape" co-ordinates of #rect3409 are
600 - 339 == 261px, and
600 - 159 == 441px.
I try to auto-generate an SVG file intended to be printed on a certain size (A4). I wish to use a path in it, which only allows 'user units', not 'absolute units'.
It seems to me that it is impossible to 'publish' an SVG file that has absolute units (e.g. document size) and a path anywhere, because I cannot get it to work properly across viewers.
Is there a way to get some consistency in rendering, like specifying a 'default DPI'?
Or put differently: Can I get my example below to render the same in all viewers without abandoning absolute units at all?
Related: Is there a way to force any of the applications below to render the image in the same way as one of the others? (E.g. I tried the -density option of 'convert', but I couldn't get the output to match Inkscape's or Firefox' output.)
Example:
I've created one SVG file, with three black squares (rect) with a red diagonal (path):
Left: square and diagonal in user units
Middle: square and diagonal in inch (seemed to me the most logical choice, but is not allowed)
Right: square in mm, diagonal in user units
Which renders differently in different viewers:
Inkscape: 90 DPI, all squares same size, red diagonal matches
Firefox: 96 DPI?, latter squares to large (or diagonal to short)
Convert: 72 DPI, latter squares to small (or diagonal to long)
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="200mm"
height="100mm"
>
<g transform="translate(50,50)">
<rect
width="100."
height="100."
x="10"
y="10" />
<path style="stroke: #ff0000" d="M 10 10 L 110 110" />
</g>
<g transform="translate(200,50)">
<rect
width="1.111in"
height="1.111in"
x="0.1111in"
y="0.1111in" />
<path style="stroke: #ff0000" d="M 0.1111in 0.1111in L 1.111in 1.111in" />
</g>
<g transform="translate(350,50)">
<rect
width="1.111in"
height="1.111in"
x="0.1111in"
y="0.1111in" />
<path style="stroke: #ff0000" d="M 10 10 L 110 110" />
</g>
</svg>
Inkscape (my default 'viewer'):
Firefox (note that the red line does not reach the lower right corner. I made a screenshot and cropped sort of arbitrarily):
ImageMagick (convert, no options besides filenames given):
All dimensions in a path tag are in user units.
You cannot specify absolute units within a path tag, which is why the path in the middle square does not render.
The simplest way I have found is to set the units using viewbox:
Set the width & height in inches.
Then set the viewbox to be the same.
This sets the user unit to be one inch.
All sizes are then specified in inches (note: I used lower case l in path tag to specify a relative move)
This displays correctly in Inkscape and Firefox.
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="8in"
height="4in"
viewBox="0 0 8 4">
<g transform="translate(4,0.5)">
<rect
width="1.111"
height="1.111"
x="0.1111"
y="0.1111" />
<path d="M 0.1111,0.1111 l 1.111 1.111" style="stroke: #ff0000;stroke-width:0.01" />
</g>
</svg>
I have had a similar issue using Apache Batik to embed an SVG file in a PDF file using iText. iText uses 72 DPI, the standard for PDF, while Batik uses 96.
To get the image to appear correctly, that is, to scale, in the PDF file, you need to divide the width=x cm height=y cm in the SVG header by 1.33 (96/72).