SVG way to make the letter 'P' with transparent background

Question

A friend asked me to help him with SVG, and I've tried my hand at it but... I'm a bit stuck. I'm trying to make a capital letter P, with the appearance of being italicized (not using fonts).

Anyway, the part I'm stuck on is making the loop on the P (red). Here's the closest I've gotten to what I want:

<svg width="600" height="600">
    <path
        transform="rotate(-30.023731231689453 266.1240844726563,81.76864624023443)"
        d="m108.96828,81.76591
            l0,0
            c0,-76.2622 70.35745,-138.09057 157.15544,-138.09057
            l0,0
            c41.67737,0 81.65121,14.55039 111.12372,40.44496
            c29.4761,25.90185 46.03244,61.02362 46.03244,97.64561
            l0,0
            c0,76.26939 -70.36356,138.09602 -157.15616,138.09602
            l0,0
            c-86.79799,0 -157.15544,-61.82663 -157.15544,-138.09602
            z
            m78.5778,0
            l0,0
            c0,38.13795 35.17816,69.04613 78.57764,69.04613
            c43.39841,0 78.57697,-30.90818 78.57697,-69.04613
            c0,-38.13169 -35.17856,-69.04664 -78.57697,-69.04664
            l0,0
            c-43.39948,0 -78.57764,30.91494 -78.57764,69.04664
            z"
        fill="red"
        />
    <polyline
        points="0,300 100,300 300,0 200,0"
        fill="black"
        />
    <polyline
        points="150,225 250,225 300,150 200,150"
        fill="black"
        />
    <polyline
        points="300,0 400,0 350,75 250,75"
        fill="black"
        />
    <polyline
        points="0,75 300,75 300,100 0,100"
        fill="white"
        />
</svg>

But I want half of the circle I've got (the circle was created in an SVG editor, but I couldn't find an object for half of one). Ideally, I want the parts of the circle to start/end directly on the horizontal segments of the letter, but the way it currently is laid out is close enough for me (though stopping from going over the top of the canvas, as opposed to just not being seen because of that, would be ideal).

I realize I may be asking a lot, but can anyone help me out? I don't even really get what each of those elements in the d property of the path mean, short of the m being the origin of sorts. W3 didn't really clarify to me...

score 1 · Accepted Answer · edited May 23 '17 at 12:29

use BEZIER cubics instead circles. Here small example of italic P:

<svg width="512" height="512" viewBox="-32.583735 -32.583735 416.84217 365.16747" >
 <g>
  <path fill="black" stroke="black" d="M 0 300 l 100 -300 l 200 0 c 58.86234 0 60 50 40 110 c -19.996015 59.973009 -39.996015 89.973009 -109.942068 89.997311 l -100.057931 0.002688 l -30 100 l -100 0 "/>
  <path fill="White" stroke="black" d="M 230 60 c 39.999997 0 40.465933 18.757507 30.465933 48.757507 c 0 0 -10 30 -50.318659 31.227083 l -60.147273 0.015409 l 30 -80 l 50 0 "/>
 </g>
</svg>

If you want circular arcs then you need to compute the control points accordingly there are equations for that. See How to create circle with Bézier curves or Google or derive them yourself.

If you want separate colors then just segmentate the polygon to zones each with its own fill color. Also this example is not transparent. If you NEED TRANSPARENCY then you need to cut the P to fillable segments ...

SVG way to make the letter 'P' with transparent background

1 Answers1