2

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.

Prionts home page logo

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.

Should I:

  • 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.

Improve this question
5
  • 1
    The website looks pixel perfect in my screen. Are you sure you're not just zooming in too much or hitting your monitor's resolution limit? Because the rest of your screenshot seems to be of a lower resolution as well.
    – Luciano
    Commented Jun 20, 2017 at 8:08
  • @Luciano. Zoom was 100%. Screen is 1680px wide. Not the latest and greatest, but certainly should be large enough. I took the shot on Chrome. The logo looks better in Firefox and just about perfect on mobile. Different ways of rendering svg I guess.
    – James Jones
    Commented Jun 20, 2017 at 9:35
  • 1
    The logo looks fine to me as well. No appreciable difference in Firefox/Chrome, using 1600 x 900 monitor, even your screenshot looks OK at full size - perhaps I'm blind?!?! All monitors have pixels, unfortunately that's life.
    – Billy Kerr
    Commented Jun 20, 2017 at 11:49
  • As others have said, it looks fine to me. I do kiiind of see where there could be crisper lines, but to me it looks just as sharp as other logos online and pretty standard. The suggestions you offered about creating the logo at its intended display size and pixel-perfect might help, but I really wouldn't invest too much time, unless it is really bothering you
    – Manly
    Commented Jun 20, 2017 at 13:51
  • @Manly and others. You folks are too kind. I'm a little less worried about it now. I was mostly annoyed at the logo in the top left.
    – James Jones
    Commented Jun 20, 2017 at 14:24

2 Answers 2

Reset to default
1

Oh yes. I got your question now. I suppose what is troubling you is the zagged circle lines of the logo in the left pane. "prionts" I can very well relate it, whenever we try to create something slanting, these zagged edges appear.

My best bet on this one might be that you save the "O" separately and export it to PNG 24 and then place in between "pri nts" and combine your logo.

You can also try it with other file formats, but PNG 24 will give you better transparency option.

Don't forget to optimize it for web.

Improve this answer
0

This is far too late and may not be your problem, but for other people who might arrive here:

If you use SVG filters, the result will resemble a bitmapped image.

SVG filters work by rasterizing the SVG.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.