How do I export an SVG from Illustrator such that it renders well in small sizes?

Question

I come from a Photoshop background and this is my first time dabbling with AI.

I would like to show my product logo in a small size on a webpage (about 15px height). I currently have a PNG (created in Photoshop) but the font is quite choppy. I am assuming it has to do with the scale.

To fix it, I am now trying to work in Illustrator and saving as SVG. I've tried a bunch of things but the logo shows up very nicely in large sizes, but not small.

Here's how it is big:

But here's how it shows when it's close to the size I am looking for:

How do I make the smaller text smoother on my webpage?

I have tried setting anti-alias in the Character window but it's disabled. Should I even try using an SVG or should I try fixing my PNG in Photoshop?

Answer 1

You need to use a font typeface that scales to smaller sizes, allowing the browser to render the font with better clarity. Not all typefaces are suited for extremely small, same goes with some types are not suited for large print either, as they become too pixelated.

Answer 2

SVG is a vector file format so it's the anti-aliasing decisions are being made by the software rendering the SVG--in this case the browser.

I think at the size you are going for, it looks just fine. But if you want to be able to tweak things, you'll have to create a raster version that you can then go in there pixel-by-pixel and tweak the anti-aliasing manually.