CODEWITHSUNDEEP
svgcut
Meeppreave
Meeppreave

Reputation: 1

cut object out of svg

I have an image whose purple in the middle has to be transparent. Behind that purple the yellow just continues through which it does not work.

Is it possible to cut the purple out of the yellow so that it becomes transparent? if so, who knows a tool for this?

regards

https://media.scoutwiki.org/images/c/c3/Badge_Scouting_Nederland.svg

Upvotes: 0

Views: 271

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Let's start with a simplified version of your SVG. I am just going to use rectangles as a stand-in for your two shapes.

<svg width="300" height="300">

  <text x="0" y="100">There is some sectret text hiding behind here!</text>
  <rect id="shamrock" fill="gold" x="0" y="0" width="300" height="200"/>
  <rect id="fleur-de-lis" x="50" y="50" width="200" height="250" fill="purple" opacity="0.5"/>

</svg>

Note that I have hidden some text behind the yellow shape, which is covered right now. Also, you can see the yellow rectangle through the semi-transparent purple rectangle.

To see through the yellow rectangle, we need to cut a hole in it that has the same shape as the purple element. We can do that using a mask.

<svg width="300" height="300">

  <defs>
    <mask id="fleur-de-lis-mask">
      <rect width="100%" height="100%" fill="white"/>             <!-- white means "keep these parts" -->
      <rect x="50" y="50" width="200" height="250" fill="black"/> <!-- black represents the part that is the hole -->
    </mask>
  </defs>

  <text x="0" y="100">There is some sectret text hiding behind here!</text>
  <rect id="shamrock" fill="gold" x="0" y="0" width="300" height="200" mask="url(#fleur-de-lis-mask)"/>

</svg>

Note that I have removed the purple rectangle temporarily, so that we can see what's happening.

If we now put it back in, we will have the final result.

<svg width="300" height="300">

  <defs>
    <rect id="fleur-de-lis-shape" x="50" y="50" width="200" height="250"/>
    
    <mask id="fleur-de-lis-mask">
      <rect width="100%" height="100%" fill="white"/>      <!-- white means "keep these parts" -->
      <use xlink:href="#fleur-de-lis-shape" fill="black"/> <!-- black represents the part that is the hole -->
    </mask>
  </defs>

  <text x="0" y="100">There is some sectret text hiding behind here!</text>
  <rect id="shamrock" fill="gold" x="0" y="0" width="300" height="200" mask="url(#fleur-de-lis-mask)"/>
  <use id="fleur-de-lis" xlink:href="#fleur-de-lis-shape" fill="purple" opacity="0.5"/>

</svg>

Note that we need to use the purple shape twice: once as itself, and once in the mask. To make the file smaller, we can define the shape once in the <defs> section, and then employ a <use> element to reference it in both places.

This probably seems a little unnecessary for just a rectangle, but if your shape is a complicated path, this can be a great space saver.

Upvotes: 2

Related Questions