Top arrow

Importing SVG with filters causes rasterization problems in Adobe Illustrator

Posted on September 30, 2013

Just a quick note of a bug I found today at work:

When importing SVG’s into Adobe Illustrator, if the SVG has filters this will cause the SVG to be (permanently) rasterized: inside AI, on export (to f.e. PDF), and in print. Normally SVG filters are only rasterized in the preview image inside AI, and will still look sharp on export and in print.

Workaround

You can get your SVG to work just fine in Illustrator if you just follow these simple steps:

  1. Open your SVG in Illustrator
  2. Create a new AI document
  3. Copy your SVG from the open .svg document into your new .ai document
  4. Manually import or copy over the SVG filters that you originally had in the SVG into your .ai file.

The 4th step is what makes this workaround slightly annoying, but it’s not too bad. Just open up your original SVG in any text editor, copy your first SVG filter (including the <filter> tags with the ID) and then go into AI, fire upp the Appearance panel, select the element that had the filter applied to it, click on the name of the filter, and click to edit it. It should open up a list of SVG filters to choose from. Click ‘Add New’, and then finally paste in the filter you copied from your svg file. Do the same for all your filters (cross your fingers you didn’t have too many!), and voila, it all works!

Sometimes Illustrator seems a bit fidgety with displaying changes you make to your SVG filters. Close the SVG filters panel, re-open it again, make sure ‘preview changes’ is selected. Then select another SVG filter, wait for the preview to refresh, then change back to the one you want. This should solve the problem!

I posted on the Adobe help forums here, to see what the Community has to say about this. As I prefer to work with Adobe Fireworks, or directly in the browser, Illustrator is not my area of expertise. If you know any better workaround, please send me a tweet!

← Blog Home

Non clickable SELECT drop down bug in Android 2.2-2.3

A ridiculous solution to a mysterious bug.

Posted on September 12, 2013

I have seen this bug a couple of times now while testing different mobile projects on older Android devices: something weird causes select drop downs (and sometimes other form elements) to completely ignore click events. Tap away at the screen as much as you want &#8211 the browser just won’t listen.

Google searches confirmed that I was not the only one that suffered from this bug. The array of solutions suggested on StackOverflow and other forums howver at first seemed to be of no help to me.

I have learnt from previous testing on old Androids that form elements can break and stop functioning for what seem to be almost any reason, but when I finally found the cause in this case, I could hardly believe it, it just seemed to bizarre. Thanks to wilco:

A fixed element that contains an absolute positioned element, which itself contains an absolute positioned element, will cause select menus on the page to stop responding altogether.

In my case it was an absolutely positioned element containing another empty absolutely positioned element that caused the bug. I added a non-breaking space (& nbsp;) to the inner element, and the problem was solved, for this time.

Old mobiles and their browsers are the new IE6. Just as before, we have to get our hands dirty and solve these bugs in order to make our content accessible and our users happy. And unlike before, the number of users on these kind of browser might not be shrinking, but growing as more and more of the world gets connected to the web!

← Blog Home