I created an
svg logo for a website ( http://prionts.com.au/ ). Unfortunately the logo looks blurry on the screen. This is particularly obvious with the shutter 'O' and the 'Photography by Rio Jones' text. Image below shows what I mean.
Some information to help:
- I built the logo at 2520px by 1110px. At this size it looks nice and crispy. It is displayed on the web page at 210px wide or 1/12 size. Is this too much of a reduction in size?
- Writing is text converted to outline.
- Assets are not placed pixel perfect. I tried pushing all the points of the shutter to the perfect edge of a pixel, but it didn't seem to improve it.
- Build the logo at the resolution it will be displayed at? I thought at 210 I'd really start to lose the ability to finesse things - that's just 8px wide per letter for 'Photography by Rio Jones'
- Make sure all points are pixel perfect?
- Convert to png?
- Use svg text rather than outline? I thought about this, but cross browser capability is an issue.
- Or something else?
I'd appreciate any advice on making this logo nice and clear.