When you look at the rendered version of the SVG https://commons.wikimedia.org/wiki/File:Triangle-perpendicular.svg, it has jagged lines:
For example, the line AC doesn't look as it should look. How can I convert this image to a PNG without getting jagged lines?
What I've tried
inkscape +antialias -background none -z -e test.png -w 276 Triangle-perpendicular.svg
This seems not to have any effect.
I've been looking at the original source svg, and it doesn't render terribly well in the browser either. AFAICT, you are rendering with antialiasing, but the stroke width and angle of your triangle are conspiring to look awkward. Try increasing the stroke width a little, or (if you can), change the angle of the line. Both might help.
The original stroke width is .79..., try 1.0
Related
First, the goal of this task is to get images to be visually as large as possible by removing excess around the the edges.
I have tried fuzz and -gravity center and they both do a good job although I think I prefer gravity.
There is a small issue though, and that is the cropping leads to images that are not retaining aspect ratio and therefore are visually non conformant to the place where they are to be displayed.
I will demonstrate using images:
I start with this input image (800x800), pay attention to edges:
When I apply the command magick "${file}" -gravity center -trim "${out}"
I get the following output (696x656), where you can see whitespace at the top and bottom edge. This is kind of ok here, however, the image sits next to another image and the difference in height is quite annoying to see. This might be ok, here but there are worse examples.
Instead, aspect ratio should be kept, and in this case, the previous image should retain the parts that are white around the edges.
A quite complex attempt to solve this was to recalculate the height to 696 which does work to get extra pixels but they are however white pixels and not the underlying images pixels:
magick "${file}" -gravity center -trim -extent "696x696" "${out}"
This white edges are now in fact part of the image where the first ones are not so aspect ratio is kept but in a rather clunky way.
So the only problem is how to tell gravity center to retain those parts.
Ideally though, any gravity operation should be performed using an aspect ratio in mind and the gravity operation should find the best scaled aspect ratioed square to use for cropping.
On another note, what is the info return values widthxheight+something+something? What are the somethings?
So I think I've got it:
magick "${file}" -gravity center -trim -extent "800x800" "${out}"
Will give me
and
magick "${file}" -gravity center -trim -extent "800:800" "${out}"
Will give me:
So the x is to be switched for a :
Note that:
magick "${file}" -gravity center -trim -extent "696x696" "${out}"
will give
and so rather than put back the height ImageMagick goes a step further and tries to crop more from the width which is actually the desirable, albeit a bit of the snails tail seems to be cut in picture two.
There should be an option I guess for how aggressive it is to walk between expanding height vs eating width.
But I am quite satisfied. Thanks #fm42!
EDIT
This is not always ideal, that it goes for the width rather than fill the whitespace:
This:
now leads to:
I've been using inkscape to create SVGs. But I've come across a problem. I've created a simple plus sign with a 1px line width (as simple as you can imagine). It is currently in PNG format with a transparent background. I've imported it into inkscape so I can convert it into a SVG. However, when I use trace bitmap, Inkscape CHANGES THE SHAPE such that the straight lines that are one pixel wide are tappered with pointed ends! I've tried different options in the trace bitmap settings but nothing seems to work. I've also gone through a number of online free conversion sites with no luck.
I wouldn't mind just creating the plus sign using html and css but the exact position of the lines as well as the line thickness tends to move around between chrome and firefox. It's very strange.
..Help?
I think I figured it out. If I create a plus sign that is 2 px thick instead of 1 px thick, inkscape does not do its smoothing thing (as long as I have unticked smoothing options). So, I do this, but draw it much bigger than what I need. Then when I load it into my website I can reduce the size of it there, and voila the 2 px width becomes 1 px width!
I want to fill a SVG path completely with a jpg or png image. I found this answer very useful ( Crop to fit an svg pattern ) but this doesn't seem to work for more complex paths. It does for rect and circles :-). When applying this code to a path it shows the jpg images upside down and mirrored. In several browsers.
This behaviour can be seen at http://www.paulvanroekel.nl/specials/colourmyvm/test.html
Any ideas?
Solved by removing unnessecary scale and transform code and by changing the coordinates for "M" (absolute) to "m" relative. That did the trick. Basically I edited the svg file again in Inkscape and saved it als normal SVG.
I want to convert a svg to a png with the inkscape command line tool. Despite of what is specified in the svg i want to set both the width of the resulting png and the dpi to be used. From the inkscape docu it seems this is not possible:
-w WIDTH, --export-width=WIDTH
The width of generated bitmap in pixels. This value overrides the --export-dpi setting (or the DPI hint if used with --export-use-hints).
I can't really understand how this could be as the width and the dpi used should not be directly related. How can I achieve to set both values.
Thanks, Martin
Ok got it I think, here as it goes in my concrete example:
In the svg the width is 2480 pixel (what you need for DinA4 300 dpi print). Now my mistake was to add "-d 300" to the inkscape call which doesn't make sense if the svg does not give the width in some unit. When doing so the resultant image has a width of 2480 * 300 / 90 = 8267 pixel . So if working with pixel in the svg you need to be aware of the fact the inkscape interprets this as 90 dpi ...
Well i guess only my confusion here yet happy to share ;-)
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.