Tuesday, March 4, 2008

Transparent artwork is rasterized - SVG and Adobe Illustrator

I'm working on a mobile interface that is requiring the use of SVG-T 1.2. I've created an interface that's going to overlay video, so I've added some transparency to my shapes in Illustrator. They're simple shapes, rounded rectangles and rectangles, no stroke. I export to SVG-T 1.2, and Illustrator hits me with the message "Transparent artwork is rasterized". Illustrator is taking my semi-opaque shapes and is converting them to PNG32, which then gets embedded into the file, increasing the size of my SVG, but also causing some issues with the handset's ability to display PNGs.

So, I google the term "Transparent artwork is rasterized", which is what Illustrator shouted at me. NO HITS. Not one hit. So you're telling me that no one in the history of this earth has even written "Transparent artwork is rasterized" on a website? A phrase I've actually seen quite a bit in Illustrator? That's kind of the purpose of this post, so there's at least one.

I know that SVG-T 1.2 supports opacity, but it's "fill-opacity". When I export as SVG Full, the attribute Illustrator uses is "opacity". I figure I could export everything at full opacity, then open up the SVG in Notepad and edit the opacity by hand. But I'm not really sure what the true attribute is, and this seems like an unnecessary workaround.

After some research done by my handy assistant (a guy who's title automatically makes him way smarter than me), we found that when adjusting transparency in Illustrator, it adjusts the entire object. SVG-T 1.2 supports transparency in either the fill or stroke, but it didn't seem to like when you apply transparency to an entire object. Illustrator allows you to specify which part of an object you want to adjust by using the Appearance panel, and selecting either the fill or stroke. Doing so, you isolate where the transparency is applied.The following image shows what the appearance panel looks like with both an object's transparency adjust AND the fill's adjusted:


Choosing to adjust my transparency using this method, SVG-T 1.2 took to my transparency without needing to rasterize anything. BAM!


Thanks, Alan. And yes, you are the man.

No comments: