How to rasterize svg to png without aliasing effect with "data:image/svg+xml" with Inkscape? - svg

I have a problem while export svg to png with svg which includes some element image objects using Inkscape.
Example:
<image xlink:href="data:image/svg+xml;base64,PD94bWwgdm....Zz4=" x="-312" y="-139" width="624" height="278"></image>
Notes:
- When I open svg in web browsers, when zoom in browser images are nice, and not have aliasing effect.
- But using Inkscape command : /Applications/Inkscape.app/Contents/Resources/bin/inkscape /test/test.svg -e /test/test.png -d 300 --> image is aliasing.
Here is result on browser and output png file:
Here is my files:
1. https://drive.google.com/open?id=1Wjt-QnX4iPL3QYHfYLI7wVfq26yBCe3e --> svg file which include with svg data "data:image/svg+xml"
2. Exported png using inkscape with dpi 300
https://drive.google.com/open?id=1k171_ARwnw0-5iyM7vwJsH_h6tFWpb1v
Please help me!
Thank you!

Use a raster file that uses the correct export dpi
Scale it to the correct size in Inkscape
Position it at a full pixel value
(untested, but should work)
In (future) Inkscape 1.0, you can also uncheck the antialiasing functionality in the export dialog, but not sure how that affects raster images. It might not look good.

Related

Why doesn't librsvg doesn't export the black paths in a PNG?

Here is an SVG image I want to convert to PNG with librsvg in my program.
This is a PNG version of the SVG exported from Inkscape:
This is a bitmap of the same SVG exported with librsvg:
Only the white portions of the image are exported. The black portions, despite being well-defined in the background, appear transparent.
This problem occurs whether I use the librsvg API or the program rsvg-convert. You can use the W3 validator to see that the SVG's markup is valid.
I notice the same thing happens in the thumbnails of the SVGs in my file browser. Perhaps they're using librsvg?
Upon digging into the files I discovered that, for some reason, the fill of the black portion was set to "fill:currentColor". I don't know where that came from, but changing it to "fill:#000000" fixed the problem.

resizing chrome theme image to fit screen size

is there a way to make the background image of chrome theme resize with the height of the window? If so, can I also make the image resize with the height until it hist a certain ratio, and then resize with the width of the window?
It's not possible. Chromium source code doesn't have any stretching/sizing modes as you can see: theme_properties.h, theme_properties.cc and theme_service.cc
I've tried specifying an SVG image with width="100%" height="100%" for the background but it wasn't rendered, looks like only raster images can be used (WEBP, JPG, PNG, etc).
I tried use jpeg format, it resized itself, without anything added to manifest.json

inkscape command line svg to png - set both width and dpi

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 ;-)

SVG file looks different in webbrowser than in Illustrator

I've been doing some stuff in Illustrator and I have a problem with saving a project in to SVG file that I open in webbrowser, It just looks different.
And it hapens only in SVG, if I save it to PDF or PNG it looks how it should.
What am I doing wrong?
That's how it looks in Ai
That's how it looks in webbrowser
Here's a link to download rar file with .ai and .svg that I have.
Since all browsers render it the same way, it would seem likely that this is a bug in the AI SVG export filter.
To me it looks like you are applying a blend mode ("Overlay" perhaps?) to the white parts on top of the image. That effect ought to be reproducible using SVG filters, but perhaps AI's exporter doesn't support that yet.
If you are using an "odd" blend mode, try changing it, or reproducing the effect another way.
Individual pixel control needed in identical svg conversion is not possible. SVG creates only specific shapes. The Ai app conversion seems to use opacity to provide the color shades. You could probably tweek opacity and add some svg filters to improve the svg.
Print your design in a . pdf file instead of exporting it directly. Then open the printed .pdf back in Illustrator and export the .svg from this one, it shoud do the trick.

scaling svg figure

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.

Resources