0

This is the heart I'm trying to draw:

enter image description here

Here's the code I've written:

<!DOCTYPE html/>
<html>
<head>
    <title>SVG Paths</title>
</head>
<body>
    <svg width="200px" height="200px">
        <pattern id="rulerPattern" patternUnits="userSpaceOnUse"
            x="0" y="0" width="10" height="10"
            viewBox="0 0 10 10" >
            <line x1="0" y1="0" x2="10" y2="0" 
                stroke="gray" fill="none" />
            <line x1="0" y1="0" x2="0" y2="10" 
                stroke="gray" fill="none"/>
        </pattern>
        <rect x="0" y="0" width="100%" height="100%"
            fill="url(#rulerPattern)" stroke="black" />

        <path d="M 100 180 20 80 C20 80 60 -15 100 80"
    stroke="black" 
    stroke-width="5"
    fill="red" />
        <path d="M 100 180 180 80 C180 80 140 -15 100 80"
    stroke="black" 
    stroke-width="5"
    fill="red" />

    </svg>
</body>
</html>

What am I doing wrong? I want to get the exact shape of the heart shown on the first picture using paths.

1 Answer 1

Reset to default
4

The given svg specifies the semi-circles of the heart's top with the C subcommand of the path element. This subcommand creates a cubic spline which is ill-suited to the purpose since no segments of circles can be drawn with this family of curves (more about splines can be found here).

The following code rectifies the svg definition:

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Paths</title>
    </head>
    <body>
        <svg width="200px" height="200px">
            <pattern id="rulerPattern" patternUnits="userSpaceOnUse"
                x="0" y="0" width="10" height="10"
                viewBox="0 0 10 10" >
                <line x1="0" y1="0" x2="10" y2="0" 
                    stroke="gray" fill="none" />
                <line x1="0" y1="0" x2="0" y2="10" 
                    stroke="gray" fill="none"/>
            </pattern>
            <rect x="0" y="0" width="100%" height="100%"
                fill="url(#rulerPattern)" stroke="black"
            />

            <path
                d="M 180,80 L100,180 20,80 A 40,40 0,0,1 100,80 A 40,40 0,0,1 180,80"
                stroke="black" 
                stroke-width="5"
                fill="red"
            />
        </svg>
    </body>
</html>

The icon can be drawn with a single path. This path consists of a polyline to generate the lower portion of the heart and two adjacent semi-circles.

The syntax for the path definition is outlined in the svg specs at W3C. The complex part is the specification of the semi-circles which employ the elliptic arc command whose usage is detailed here.

NB: The DOCTYPE element is not an xml/html element, it closes without /.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.