I don't fully understand your problem, but I think I does turn around bitmap limitations vs vector : you can't expect the same quality when exporting to bitmaps. The more you zoom in bitmaps, the more you'll see abnormal pixels.
Please point out the tiny differences you are talking about, I can't barely see nothing at normal zoom level.
I'd keep in mind that using 1px vertical lines having a 1px stroke will have the strokes on a half pixel. Renderers will need to interpolate the edges of the strokes, which may result in aliasing artifacts.Line or path will probably have similar results.
@Lazur is the expert on these issues. Maybe Lazur can comment.
Try this: Select the black rectangle in your svg and move it half a pixel in the x direction. With the rectangle still selected open the export dialog and set dpi to 288. Export selection.
Thank's for the mention @TylerDurden. Here is a "flattened" version.
png:
svg:
The vertical lines were shifted by 0.5 px. To capture 1 px details pixel perfect, you need to adjust everything to the pixel grid -of the final output.
Like, working with a px rid in inkscape, even coordinates and exporting at increments of 96 dpi.
If the vertical lines aren't exactly matching the grid but next to eachother as is, the anti-aliasing can interfere with the outcome as in your export.
For experimentation: try zooming in and out with your original html. At some zoom levels there are visible gaps, other times there is no gap.
Created the "flattened version" to address the issue. Paths are combined, stroke converted to a path and they are merged together.
Unnecessary nodes removed.
This way, the image would display right even if rotated by a certain degree.
Still. Those lines at random angles in the image aren't looking the best in my humble opinion.
Can try oversampling -export svg at 192 dpi and scale down the raster image by 50%.
Beyond the Basics Export svg loses color and adds pixels on export
Inkscape.org
I created an SV using JAVA. https://craigcoleman.com/miracles/ .
When I load graphic with Inkscape and export to a png or jpg
I lose some of the color and the colors fade on the line.
Additionally I get some pixels around some of the lines. I copy the image from the web and copy it into gimp then zoom in.
This is the code I wrote to create a line :
Here are the jpg and png
https://craigcoleman.com/art/files/miracles-5.jpg
https://craigcoleman.com/art/files/miracles-5.png
I am wondering if I should use a path.
Please throw me a bone.
I don't fully understand your problem, but I think I does turn around bitmap limitations vs vector : you can't expect the same quality when exporting to bitmaps. The more you zoom in bitmaps, the more you'll see abnormal pixels.
Please point out the tiny differences you are talking about, I can't barely see nothing at normal zoom level.
I'd keep in mind that using 1px vertical lines having a 1px stroke will have the strokes on a half pixel. Renderers will need to interpolate the edges of the strokes, which may result in aliasing artifacts.Line or path will probably have similar results.
@Lazur is the expert on these issues. Maybe Lazur can comment.
Try this:
Select the black rectangle in your svg and move it half a pixel in the x direction.
With the rectangle still selected open the export dialog and set dpi to 288.
Export selection.
Thank you for all the advice! I am working with my code. I now understand rendering will affect an output from svg to png/jpg
I wonder how a path would work instead of a line?
Using a path with a dpi of 288 really helps! The entire image is to large to upload. Thank you!
Thank's for the mention @TylerDurden. Here is a "flattened" version.
png:
svg:
The vertical lines were shifted by 0.5 px. To capture 1 px details pixel perfect, you need to adjust everything to the pixel grid -of the final output.
Like, working with a px rid in inkscape, even coordinates and exporting at increments of 96 dpi.
If the vertical lines aren't exactly matching the grid but next to eachother as is, the anti-aliasing can interfere with the outcome as in your export.
For experimentation: try zooming in and out with your original html. At some zoom levels there are visible gaps, other times there is no gap.
Created the "flattened version" to address the issue. Paths are combined, stroke converted to a path and they are merged together.
Unnecessary nodes removed.
This way, the image would display right even if rotated by a certain degree.
Still. Those lines at random angles in the image aren't looking the best in my humble opinion.
Can try oversampling -export svg at 192 dpi and scale down the raster image by 50%.
Lazur & Tyler
Thank you so much. I need to try to replicate this with code (java).
I appreciate the effort and the explanation.
Craig