For a new authoring tool at work, my colleagues and I want to export images to SVG. These images will be used in PDF and HTML. The images have a bitmap and annotations. When exporting to, e.g. PNG or JPG, the annotations are not very smooth in the PDF, so we want to use SVG. We would rather not use EPS because of the file size. For now we are focused on getting the PDF images to look correct, but we are having problems exporting with CorelDRAW. The same image looks different with each export.
The main problems are:
- The circles sometimes have a thinner outline than specified.
- The image becomes a lot smaller
- The numbers in the circles are a bit wonky, especially curves.
I have attached a screenshot of the settings that are used and some of the different outputs we got.
- Image_1: export by me, the image is small, but the circle outline seems correct.
- Image_2: exported by my colleague with the same .cdr file. The top right outline is correct, but all the others are a lot smaller.
- Image_3: another export by me, same .cdr file again, the file is a lot bigger, but the outlines of the circles are the same as image_2.
I have done more exports with different images, new files etc, but the results are always different. I do not understand why sometimes the images become a lot smaller or bigger, or why the outlines of the circles change.
I have changed all the settings but it did not seem to fix the problems, but perhaps I have not found the correct combination. Any tips?
In your example files the difference in the circles rendering differently seems to happen because in image 1 they are being rendered as paths and in images 2 and 3 they are being rendered as circles with a transform applied (which scales them and moves them from the top-left corner of the image). Did you convert the circles to objects in image 1 before exporting?
This is the code for a circle in image 1:
<path class="fil0 str0" d="M7 133c0,-59 48,-108 108,-108 59,0 108,48 108,108 0,59 -48,108 -108,108 -59,0 -108,-48 -108,-108z"/>
And this is the equivalent object in image 2:
<circle class="fil0 str0" transform="matrix(1.45977E-014 -0.55118 0.55118 1.45977E-014 114.802 132.535)" r="195"/>
And the difference in size is because 1 and 2 have exported in inches:
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.58021in" height="4.81869in" style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'viewBox="0 0 3300 4442" xmlns:xlink="http://www.w3.org/1999/xlink">
and image 3 in pixels and with a much larger viewbox:
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1074px" height="1446px" style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'viewBox="0 0 990075 1332564" xmlns:xlink="http://www.w3.org/1999/xlink">
Thank you, this helped a lot. It seems like saving the file as pixels fixes all these issues, but unfortunately, another one occurred. I am not sure if the latest issue is related to CorelDRAW or to the authoring tool, but perhaps you can help.
I exported an image twice, 1 SVG and 1 JPG. I had it imported in the authoring tool and then published to a PDF and CHM file. In the CHM file the both images are correct, the exact same pixelsize as specified. In the PDF the SVG is way too big, it does not even fit on the page. Is this normal behavior for SVG? Or is it an issue with the authoring tool?