We help IT Professionals succeed at work.

SVG Graphics & Adobe illustrator

MY PROBLEM: I want our company website's Logo to look clean & crisp. I am guessing that use of SVG graphics is the correct solution? (than the usual .JPG/.PNG/.GIF bitmapped graphics)

WHAT I TRIED:  I tried out Adobe Illustrator.  Opened Illustrator, wrote a simple Text string using the default Font (MyriadPro), Saved As an .SVG file, the viewed it with a Browser.
Chrome displayed it perfectly ... Firefox and Safari did not.
After Googling around, I see that not all browsers yet support .SVG Graphics.

Can anyone point me to the correct tools/techniques ? Even the Google Logo on the google.com home page looks perfect, no matter how large you zoom in.
Comment
Watch Question

John KorchokProduction Manager
CERTIFIED EXPERT

Commented:
For this kind of application, I create indexed-color PNG files (Google uses an RGB PNG). Indexing allows the file to be smaller and load faster.

Google has used hand-optimization to ensure sharp vertical and horzontal lines.

You can also create a double-size logo, then scale it to half-size in the browser. This also increases the apparent sharpness.

Author

Commented:
Thanks, though I need info for Vector Graphics, not Raster/BitMapped ...
John KorchokProduction Manager
CERTIFIED EXPERT

Commented:
In your original question, your concern was creating a sharp appearance and you mentioned the Google logo as an example. You can create sharp logos with either vectors or bitmaps.

Illustrator's vector exports are low quality for both curve accuracy and compatibility. For better SVGs, download and install Inkscape. It's native format is SVG and it can write 4 different flavors of SVG with more accuracy than Illustrator.

Author

Commented:
Thanks all!
Emily PhelanUX/UI Designer

Commented:

What versions of Firefox and Safari are not displaying correctly? I'm curious because I frequently use SVGs, and according to https://caniuse.com/#feat=svg, SVGs are fairly supported.


As for exporting quality SVGs from Illustrator, the default settings are not usually enough. If you use "Save As..." you'll want to open "More Options" in the lower right and change the Decimal Places. The default value is typically 1, but in my experience, that's only good enough for basic shapes. Logos, depending on complexity, could require a Decimal Place of 3 or 4.



Using "Export > Export As..." has a similar dialog:


If you're using "Export > Export for Screens..." you'll need to click the small gear shown below to open the format settings:


I'm only a designer and not a developer, but I'm sure there are more settings that could be leveraged to optimize SVGs. One thought that comes to mind is displaying the code inline versus requesting a file. 


Lastly, if you are more comfortable with markup or want to skip Illustrator, I've had success using https://jakearchibald.github.io/svgomg/ to clean up SVGs.