SVG: Text as mask

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
Alikrus
Posts: 5
Joined: Thu May 27, 2010 8:14 am

SVG: Text as mask

Postby Alikrus » Thu May 27, 2010 9:02 am

Hello!
I'm starting to lerning for svg-graphics. But some my questions is not resolved with google and manuals.
So, I needing for next picture
svg_mask.gif
Sharp over hexas
svg_mask.gif (5.83 KiB) Viewed 4179 times

and writed next code in notepad

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="258" height="250"  xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Text-mask</title>
<desc>Digitals</desc>      
<defs>
<clipPath id="sharp">
<text x="0.5em" y="1em" font-family="Arial Bold" font-size="156" stroke="black" stroke-width="1" fill="black">#</text>
</clipPath>
</defs>
<text id="Digi" x="0" y="0" font-family="Courier New" font-size="13" stroke="magenta" stroke-width="1" fill="black">
<tspan x="0" dy="1em">0123456789ABCDEFEDCBA9876543210</tspan>
<tspan x="0" dy="1em">123456789ABCDEF0FEDCBA987654321</tspan>
<tspan x="0" dy="1em">23456789ABCDEF010FEDCBA98765432</tspan>
<tspan x="0" dy="1em">3456789ABCDEF01210FEDCBA9876543</tspan>
<tspan x="0" dy="1em">456789ABCDEF0123210FEDCBA987654</tspan>
<tspan x="0" dy="1em">56789ABCDEF012343210FEDCBA98765</tspan>
<tspan x="0" dy="1em">6789ABCDEF01234543210FEDCBA9876</tspan>
<tspan x="0" dy="1em">789ABCDEF0123456543210FEDCBA987</tspan>
<tspan x="0" dy="1em">89ABCDEF012345676543210FEDCBA98</tspan>
<tspan x="0" dy="1em">9ABCDEF01234567876543210FEDCBA9</tspan>
<tspan x="0" dy="1em">ABCDEF0123456789876543210FEDCBA</tspan>
<tspan x="0" dy="1em">BCDEF0123456789A9876543210FEDCB</tspan>
<tspan x="0" dy="1em">CDEF0123456789ABA9876543210FEDC</tspan>
<tspan x="0" dy="1em">DEF0123456789ABCBA9876543210FED</tspan>
<tspan x="0" dy="1em">EF0123456789ABCDCBA9876543210FE</tspan>
<tspan x="0" dy="1em">F0123456789ABCDEDCBA9876543210F</tspan>
</text>
<text id="Digi" x="0" y="0" font-family="Courier New" font-size="13" stroke="blue" stroke-width="1" fill="black" clip-path="url(#sharp)">
<tspan x="0" dy="1em">0123456789ABCDEFEDCBA9876543210</tspan>
<tspan x="0" dy="1em">123456789ABCDEF0FEDCBA987654321</tspan>
<tspan x="0" dy="1em">23456789ABCDEF010FEDCBA98765432</tspan>
<tspan x="0" dy="1em">3456789ABCDEF01210FEDCBA9876543</tspan>
<tspan x="0" dy="1em">456789ABCDEF0123210FEDCBA987654</tspan>
<tspan x="0" dy="1em">56789ABCDEF012343210FEDCBA98765</tspan>
<tspan x="0" dy="1em">6789ABCDEF01234543210FEDCBA9876</tspan>
<tspan x="0" dy="1em">789ABCDEF0123456543210FEDCBA987</tspan>
<tspan x="0" dy="1em">89ABCDEF012345676543210FEDCBA98</tspan>
<tspan x="0" dy="1em">9ABCDEF01234567876543210FEDCBA9</tspan>
<tspan x="0" dy="1em">ABCDEF0123456789876543210FEDCBA</tspan>
<tspan x="0" dy="1em">BCDEF0123456789A9876543210FEDCB</tspan>
<tspan x="0" dy="1em">CDEF0123456789ABA9876543210FEDC</tspan>
<tspan x="0" dy="1em">DEF0123456789ABCBA9876543210FED</tspan>
<tspan x="0" dy="1em">EF0123456789ABCDCBA9876543210FE</tspan>
<tspan x="0" dy="1em">F0123456789ABCDEDCBA9876543210F</tspan>
</text>
</svg>

But it very large and bad way.
Can You help me?
Top
User avatar
prkos
Posts: 1625
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

Re: SVG: Text as mask

Postby prkos » Thu May 27, 2010 5:04 pm

You can use Inkscape do it quickly, did you install it?

Create a text object (magenta), duplicate it and color it blue. Then create another text object with just # and increase the font size. Color the # object white and position it over the blue text. Select # and blue text and do a mask (Object > Mask > Set).
just hand over the chocolate and nobody gets hurt

Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download
Top
Alikrus
Posts: 5
Joined: Thu May 27, 2010 8:14 am

SVG: Text as inverting mask

Postby Alikrus » Fri May 28, 2010 6:52 am

Thanks! ;)
But generated svg with that method is too inflated than my manual svg-file :roll:
Inkscape interesting soft, but when i start to draw my first horse for few minutes from easy hand, program doing fatal error and my work being lost. I'm not artist and this work can't to reproduct. So sorry :o

And i have one more question: When i drawing a text, by what i can doing inverted mask for this?
For example, i have a foto and with ellipses and rectangles i want to invert some parts of foto. Or with text. What instrument i want for XOR-operation?
I have few decades of examples with masks, but this effects i'm can't finding. :roll:
Top
llogg
Posts: 443
Joined: Tue Mar 11, 2008 7:30 am

Re: SVG: Text as mask

Postby llogg » Sat May 29, 2010 10:17 pm

I have a hard time understanding your second post, but here's how to do your first question.
1. Create your text object using :tool_text: .
2. With your text selected with :tool_selector: create a duplicate by ctrl-D.
3. Change the color of your duplicate text using the fill and stroke dialogue.
4. Again using :tool_text: create your # sign and make it large enough to cover the area of your text that you desire.
5. Select the # sign and the text duplicate and align them using the align and distribute dialogue or by simply position the # sign over the text manually.
6. With the # sign and the text duplicate selected together do Object>mask>set. As long as you didn't move the duplicate from the time it was created you're finished.
Attachments
g4371.png
g4371.png (133.49 KiB) Viewed 4131 times
Top
~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: SVG: Text as mask

Postby ~suv » Sun May 30, 2010 1:45 am

an example using SVG filters:
Alikrus-svg_mask-filtered-6.png
Alikrus-svg_mask-filtered-6.png (46.64 KiB) Viewed 4120 times

based on Inkscape » Filter Effects—Custom » Compositing Filter Primitives:

The Composite filter primitive allows two overlapping objects or an object and background to be merged pixel-by-pixel according to a mode-dependent rule. (…)

    Atop: The bottom object determines what part of the top object is visible. The bottom object is also visible.


Notes:
  • open the SVG in Inkscape and have a look the filter primitive 'Composite' used in the filter editor
  • important: if you create similar new filter effects with Inkscape, don't forget to add the “enable-background” tag as described in above linked manual page
  • not all SVG viewers or browsers support SVG filters equally well (attached example renders fine in Squiggle (Batik 1.7) and Opera 10.53, but not in Firefox 3.5.9 and Safari 4.0.5)
  • Reference: SVG 1.1 Specification 15.12 Filter primitive 'feComposite'

Notes II:
I don't know a lot about using SVG filters myself - maybe someone more knowledgeable can comment on this example?
Attachments
Alikrus-svg_mask-filtered-6.svg
(4.25 KiB) Downloaded 368 times
Top
Post Reply

Return to “SVG / XML Code”