<svg width="258px" height="184px"> <path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248.761,92c0,9.801-7.93,17.731-17.71,17.731c-0.319,0-0.617,0-0.935-0.021c-10.035,37.291-51.174,65.206-100.414,65.206 c-49.261,0-90.443-27.979-100.435-65.334c-0.765,0.106-1.531,0.149-2.317,0.149c-9.78,0-17.71-7.93-17.71-17.731 c0-9.78,7.93-17.71,17.71-17.71c0.787,0,1.552,0.042,2.317,0.149C39.238,37.084,80.419,9.083,129.702,9.083 c49.24,0,90.379,27.937,100.414,65.228h0.021c0.298-0.021,0.617-0.021,0.914-0.021C240.831,74.29,248.761,82.22,248.761,92z" />

I looked at the MDN, but could not match any of the coordinate input templates. Please explain how this works (attribute d).

    2 answers 2

    Here is the description .

    • M<X>,<Y> : move the “pen” to the specified point;
    • c<X0>,<Y0>,<X1>,<Y1>,<X2>,<Y2> : build a curve on three points;
    • h<X> : horizontal line (with a length of 0.021, here it is not particularly noticeable);
    • z : close the shape.

    Depending on the register, the coordinates are perceived as either absolute (upper case) or relative (lower). Separators (commas or spaces) between the numbers can be omitted if the second number is negative (the “-” parser understands that the previous number has ended).

    If anything, he sketched a simplest text SVG editor here, only he needs the attribute xmlns="http://www.w3.org/2000/svg" . Well, the closing tag, of course.

      To find out what svg is drawing, just run it. For example, in a browser that understands svg. If you have one, then click the button "Run code", which is located immediately below the code.

       <svg width="258px" height="184px"> <path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248.761,92c0,9.801-7.93,17.731-17.71,17.731c-0.319,0-0.617,0-0.935-0.021c-10.035,37.291-51.174,65.206-100.414,65.206 c-49.261,0-90.443-27.979-100.435-65.334c-0.765,0.106-1.531,0.149-2.317,0.149c-9.78,0-17.71-7.93-17.71-17.731 c0-9.78,7.93-17.71,17.71-17.71c0.787,0,1.552,0.042,2.317,0.149C39.238,37.084,80.419,9.083,129.702,9.083 c49.24,0,90.379,27.937,100.414,65.228h0.021c0.298-0.021,0.617-0.021,0.914-0.021C240.831,74.29,248.761,82.22,248.761,92z" />

      How he does it? Yes, the dog knows it. Maybe here you will find the answer https://svg-art.ru/?page_id=897

      • Thank. I ran in the browser. It turns out lime. But I do not understand the process of forming the value for the parameter d. - Vladimir Smirnov