Printable View
Hi,
I have a set of drawings in xara. All vector graphics, very happy with them and XARA. I export the images as PNG and they lose clarity.
Are there any tricks to ensure the images exported look sharp?
The end application is 800 x 600 and the icons are around 36x36 px. We tried a large image export but the PC software did a really bad job of down scaling.
There must be some way to make it match the Xara view when scaled the same.
Thanks
Tim
Any chance you could share some vectors you're having issues with in turning to png Tim?
Hi, Thanks
Here is an xar file that has 2 original icons and the PNG saved an imported back in icons
Attachment 127062
export the image at a higher resolution than 96 dpi - if I export it at 600 dpi it imports back into xara pretty close to the original
edit... still a bit blurry though .... hummm
getting closer at 1200 dpi...
But exporting at 1200 makes the image 388 x 403 as I said in my original post "We tried a large image export but the PC software did a really bad job of down scaling."
I don't know what the problem was but as you can see it looks OK to me with XDP16
Attachment 127065
Attachment 127064
Take your vector and enlarge it to the size of the page or bigger.Quote:
Originally Posted by TimBox
Create a bitmap copy of that then resize the bmc to the required size.
Export that as PNG.
On re-import, this, the ultra-hires bmc and the vector all Preview to similar resolutions.
Instead of PNG, use SVG.
Acorn
At the size of your icons, and at 1:1 (96dpi) there are not a lot of dots/pixels to work with. So Xara anti-aliases the image which when viewed at 96dpi on your computer screen or a monitor will look reasonably sharp. But if you enlarge the image zoom in then the image will never be sharp.
Is this image is being used for a website? Because if so, then Steve, I don't think that exporting at any size is going to make a difference except if the dpi is less than 96dpi. If the image is being used for print, then that is a different story.
I wonder if this should have been posted in Web Design Chat?
then the issue is with that software, not xaraQuote:
Originally Posted by TimBox
Agree with all previous posts. Icons at 36 x 36px (or similar small size) require much thought. As stated earlier create them at least ten times the required resolution. Try as far as possible to use whole pixel sizes (or multiples of same), and as Acorn suggest if possible use svg's.
Quote:
Originally Posted by handrawn
I exported from xara then imported back into xara. And I saw the difference. So not sure why I should be blaming a PC app development package...
Egg
The end result is a 800 x 600 display. The icons are exported at the size they are used. 1:1
In Xara at 100% zoom they look ok. If you exported as a PNG at 2,000,000 x will not help if they have to be scaled back down to same size. What is the advantage?
Acorn
I will try your approach, not sure it will work, but will try it.
The PC application will be a fixed sized 800 x 600. They work by having fixed assets, Want a bigger Icon? Load a bigger image. Working with SVG's in a PC application to generate the icons is not something I have heard of.
There is some anti aliasing going as its exported that is making the image less sharp. I have loads of PC app whos Icons that look crisp an clear. I may have to export the icons as SVG into another graphics prog as it may do a better job.
Egg - Brilliant.
Hi TimBox,
I'm making the assumption that you're developing a webpage.
I’ve been working for the past bit on replacing the png/jpg files that Xara generates when exporting vector graphics. It is possible to use svg files in your site, which retain their clarity to (theoretically) infinite magnification, but it is definitely some extra work and outside of Xara’s native capacities.
In a nutshell:
1) Develop the svg graphic in a separate project. I started out using P&GD, but I switched over to Inkscape because it allows greater precision. It doesn’t matter how big you want the graphic to appear on your page, because you’ll specify that later. But it’s a good idea not to make it too small; otherwise, the graphic could be less accurate. And don’t make it huge; otherwise, it can increase file size substantially. Be sure to save the graphic in svg format, not png. I also recommend that you use an on-line svg-optimizer tool to reduce the file size once it’s complete.
2) Import the graphic into your Xara website project. It will serve as a placeholder. While this is not absolutely necessary to do this, it helps as you develop the website if the image shows up in recognizable form. Personally, I prefer to “Create a bitmap copy” after importing and then to delete the original imported graphic. There is less risk of making a mistake down the road.
3) Resize the image to the desired dimensions and place it exactly where you want it to appear on the page. Note that the width-to-height aspect cannot be altered from the original file.
4) Click on the bitmap image and convert it to a placeholder (under the Web Properties tab) by clicking the HTML body button and inserting the following:
<img style="width:***px" src="index_htm_files/YOURSUB/FILENAME.svg" alt="Your choice of alternate text">
The width that you specify as *** should correspond to the width of the placeholder you created. The alt property is optional: you can put a description of the graphic. More on the src below. By the way, be sure to unclick the “Re-generate placeholder image automatically” option before accepting the change; otherwise, the image will turn to a grey box.
5) Back to the src, which is the tricky part of the process. Xara will not export the image. For all practical purposes, the placeholder is just code that will be inserted into your html, with instructions to look for the file with the image. So, you’ll have to manually put the image in the place that the code will find it.
Whenever you export your site to a local directory, Xara generates all the elements and puts them into a subdirectory, named by default, index_htm_files/. If you copy and paste your svg image file there, the html can find it. However, if you put it directly into that directory, it will be deleted every time you re-export, meaning that you will have to copy and paste each time. However, if you create your own subdirectory within index_htm_files/ (index_htm_files/YOURSUB/), the files there will not be touched when the website is re-exported. In other words, you don’t have to copy and paste again.
Note that whenever you close your session, the software loses its connection to the exported files. So, for every new session, you’ll have to re-export to the same local directory to re-establish the link if you want to use preview. On the other hand, once it’s done, as long as you’re in that session, the page preview will remember the location of your svg files.
At the point that your site is finished, and you're uploading your site to the server, you'll have to be sure that the subdirectory you created with the svg files is put there as well.
I believe and hope that that is the entirety of the process that I came up with.
If this is what you were after, and you find it helpful or if you have any problems, please let me know. There is a last step that I figured out, strictly for SEO purposes. It is combining your svg images into a single file and accessing them in the various placeholders as "sprites". It’s pretty cool. If you’re interested, let me know.
Thanks Gary but unfortunately I don't think TimBox is getting my point at present.
Hi gcellison
Re svg's I don't think thats correct. An svg merely tells the browser to draw a line from position x and position y in a certain direction. The width and height of an svg has no impact on the svg's filesize.Quote:
... And don’t make it huge; otherwise, it can increase file size substantially....
Here are 3 links to svg's of various sizes but the vector co-ordinates are the same. Each svg file is 1 Gb regardless of the size. (You have to zoom in to view the 3000 image) ;)
https://parkeston.com/svg/filesize/filesize-30.svg
https://parkeston.com/svg/filesize/filesize-300.svg
https://parkeston.com/svg/filesize/filesize-3000.svg
Hi Egg.
Quote:
Originally Posted by Egg Bramhill
You're right. The svgs are nothing but text encoding directions for the browser to draw an image.
I didn't give an explanation of my point.
What happens is that if the design is too small, the decimals will be truncated and give a less precise image, particularly if it is optimized. If the image is huge (for example, it you design it at 1000 x 1000 when 50 x 50 would suffice), the code will include lots more characters than are needed (all the superflous final 0s). While the image quality will not suffer, it will not benefit either. So, the file size will end up being much bigger than it should be, defeating the secondary reason for using svg images (after precision on magnification) of reducing file size as much as possible.
Thanks for letting me clarify.
gcellison
Thanks but no I'm not developing for a web page its a PC application. In xara I'm very happy but as soon as I export the images they import back blurry. I'm pretty sure Its down to the anti aliasing.
Either xara is not showing the true image on the screen eg its better or its not using the same system in exporting as in displaying.
Greg, have a look over https://www.talkgraphics.com/showthr...DA-Web-Exports.
This handles scaling and storing the PNG fall-back for display in non-SVG capable browsers.
Acorn
P.S. Add a comment there to nudge Xara to implement SVG rendering direct from the design.
Here is an image of the issue.
Left is xara at 100% and the right is the pc using the exported PNGs
Attachment 127070
And here I enlarged 2 of the icons you can see more anti aliasing on the exported image
Attachment 127072
One thing I have seen that may help me is, if I export the images as a web site then pick out the saved PNG's they match the screen
try changing the xara view quality to 'full colour' before you export you vector to png - that will then export your vector as a PNG without any anti-aliasing - then if there is an issue with anti aliasing being 'compounded' that may fix it
the ringed image was so exported from vector, then reimported at 100% zoom:
Attachment 127074
in my first post in this thread I had blipped over the fact that these are very small imagesQuote:
Originally Posted by TimBox
like egg said you have to be very careful at such a size - there are programs that will have special function for this, but not xara
i think what you are seeing is the compound effect of exporting the image with antialias and then reimporting it and viewing it in xara with screen rendering antialias turned on - the effect of this is negligible at normal image sizes but at very low sizes it is seen
are you exporting the web page and viewing the pngs in another app, if so that might support such a view....
Thanks Acorn!Quote:
Originally Posted by Acorn
That's great advice.
Couple of points I didn't make in my earlier posts Tim:
1. If you're creating pngs to a set pixel size always set your units to pixels in Xara, not cm's. You can immeadiately see that your 'calendar' icon is 31px wide x 32.2px high, which will make a bad image. Set the width to whole pixels i.e. 32px
2. I use the following settings on exporting an image from Xara.
Egg
Many thanks I did not see that.
Cheers Tim
Just to add that making sure the images are exact pxs and exporting the images using "Export supersite" produced images that do not degrade.
Thanks all
Tim
that's good ;)
Further experimenting. I looked at various sized images and reducing them down to 36x36. The results are quite interesting when zoomed in.
https://parkeston.com/tim-box-2/
I'm realising now that just doing drawings in xara as vectors does not produce the best images for icons.
There is a definite skill in being able to control the anti aliasing consistently so you get crisp clear images even at tiny resolutions. This is a bunch I pulled of my gmail page. They smiley face is around 19 x 19 pxls
Attachment 127089
LOL
If only I looked on the internet! This is a great video explain how to generate icons https://www.youtube.com/watch?v=KYpVtDj-xQs
that was the point of my post #26, though assuming you were experienced in the black art of antialiasQuote:
Originally Posted by TimBox
again it is good that you found an explanation that works for you...
Most of these symbols are generic and available as Text Icons in Xara:
Attachment 127090
Do note TG is changing the Text to JPG here.
Acorn