• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Export to SVG and keep transparency knockout groups

Community Beginner ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

Hi there,

I'm creating technical illustrations. These consist of the drawing itself (vectors) and usually an arrow to show the user what to do (attached an example).

The ends of the arrow are frequently masked with a transparency knockout group so that it seems like the arrow is coming out of the component.

Exporting this to a PNG works fine. But: Exporting to a SVG apparently doesn't, at least not with the settings I tried so far. The transparency knockout group does no longer work and the end of the arrow is visible which obviously looks meh.

Now exporting PNGs has worked for us so far. Unfortunately, we use the illustrations in documentation which we provide as a PDF file. A part of the documentation is printed as well, so the PNGs need a certain minimum resolution and thus they bloat the PDF to a quite large size and slow down the rendering engine.

Also we compress the PDFs before providing them on our website. Sometimes I receive complaints because some image got too blurry to read.

Thus, I'd like to switch to SVGs instead. Is there a way to export the SVGs without messing up the transparency knockout groups?

 

Thanks and enjoy your day!

(Just in case anyone wonders: The native 'Illustrator document' is the PDF file. Yes, I know, it's not .ai, but we store all our drawings as .pdf, because so far that worked just fine and PDF allows viewing to everyone instead of being limited to Illustrator users).

TOPICS
Draw and design , Import and export , Print and publish , Sync and storage

Views

239

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

What do you use to produce the PDFs? Is it necessary to use PNG or SVG? Why not keep them as AI or PDF files?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

We're using ST4 (content management system).

They recommend sticking to SVGs for web formats.

https://st4doc.infocu.be/content/cm-27021601105533579-en-US/t-279830923_26_132614-en-US

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

As far as I know, knockout groups are not supported in SVG. Can you not use another method? I'm not sure why a clipping path wouldn't work in this instance?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

Sounds interesting. I'll give it a try.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

LATEST

Or try to use Flatten Transparency for the knockout group (with Preserve Alpha Transparency checked).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines