1

Pretty new to Illustrator, so I've been working on some graphics for quite a while and when I tried exporting it as SVG, to my surprise some parts of the artworks look blurry and pixelated.

I understand that SVG has limited features, but for some reason I though that Illustrator will convert my drawing to SVG-compatible under the hood, but it doesn't seem to be the case.

So, my question is: is there a mode in Adobe Illustrator where you can use only SVG-compatible tools and all others are blocked to avoid such surprises on the export stage? Or how people usually do this, just by learning which feature is compatible with SVG and which is not?

11
  • What kind of graphic are you talking about? How did you make it? If you create a raster image (a pixel based image), place it in Illustrator, and export as SVG, it won't magically become vector. It will just be a raster image inside an SVG. To create a vector image, you either need to recreate it by hand, or auto trace the image.
    – Billy Kerr
    Feb 12 at 9:56
  • @BillyKerr I've created it from scratch. I've used mesh gradients, stroke gradients that, after some research, are not supported by SVG format. If I knew that before, I wouldn't have used them and used other options that are supported by svg. The whole point of using illustrator for me was to make scalable SVG. And turns out I just made pixel image just as I could in photoshop
    – LNK
    Feb 12 at 9:58
  • Yeah, mesh gradients aren't supported in SVG, but SVG gradients are.
    – Billy Kerr
    Feb 12 at 9:59
  • 1
    @user8356 this isnt strictly speaking true. Additionally you cant assume all svg rendering tools support all the features inkscape supports. SVG is not one target
    – joojaa
    Feb 12 at 18:54
  • 1
    @user8356 - actually Inkscape has a few things which are not supported in SVG, such as mesh gradients (similar to Illustrator's). Also Live Path Effects would need to be turned into ordinary paths. Mesh gradients were supposed to be added to the SVG format, but apparently there were issues doing so. Perhaps it'll happen one day, but for the moment, it's unsupported.
    – Billy Kerr
    Feb 13 at 12:47

1 Answer 1

2

but for some reason I though that Illustrator will convert my drawing to SVG-compatible under the hood, but it doesn't seem to be the case.

Nop. It is not. Not only with SVG but also with some versions of PDF, especially for print.

So the only thing you can do is make the base shape, a pure vector, closed paths, solid fills and strokes (RGB), and from there start adding specific things like gradients and testing them. Save incremental versions, like BunnyShapeSvg-01.ai so you can go back to a version that does not introduce rasterized elements.

Here is a list of features of the SVG.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element

I must say that even using Inkscape, which is SVG-based also produces raster elements. You need to differentiate two concepts. Vector only and SVG compatible. A raster element inside an SVG is SVG compatible, but not vector only.

A third thing to differentiate are effects that can be added after the SVG is generated, such as box-shadows.

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.