tags:

views:

381

answers:

2

I just want a simple SVG image that has some arbitrary text on an angle, which I can do. Thing is, I also want the text to have a sort of "outline" effect. Like rather than a solid D, the inside and outside edges of the letter D are drawn with a line of a specified thickness and the rest of the D isn't drawn at all, so as to look almost "hollow".

Can SVG do this?

+3  A: 

Yes it can ;-)

I tried to realize that with Inkscape and then edited the source of the svg-File. Just don't fill it and use a stroke with color and width to draw it. I got that:

<text
       x="100"
       y="100"
       id="text2383"
       xml:space="preserve"
       style="font-size:56px;font-style:normal;font-weight:normal;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"><tspan
         x="100"
         y="100"
         id="tspan2385">D</tspan></text>

The interesting part is in the "style" attribute.

"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
Peter
Sweet. I managed to get this out of Inkscape too (rather than editing XML, which is cool).
cletus
+3  A: 

Graphical objects in SVG can have a fill (black by default) and a stroke (none by default). If you want to have red outline on your text, then set fill="none" and stroke="red". You might want to also tweak the value of the stroke-width property.

codedread