{"flag":true,"single":true,"pageTitle":"SVG Tutorial","post":{"id":305,"user_id":"1","slug":"svg-tutorial-nqtk","title":"SVG Tutorial","body":"

SVG stands for Scalable Vector Graphics<\/strong>. Its XML format, not lose quality, supported by browsers.<\/p>\r\n

SVG has some predefined shape elements that can be used by developers:<\/p>\r\n

    \r\n
  1. Rectangle <\/strong><rect><\/li>\r\n
  2. Circle <\/strong><circle><\/li>\r\n
  3. Ellipse <\/strong><ellipse><\/li>\r\n
  4. Line <\/strong><line><\/li>\r\n
  5. Polyline <\/strong><polyline><\/li>\r\n
  6. Polygon <\/strong><polygon><\/li>\r\n
  7. Path <\/strong><path><\/li>\r\n<\/ol>\r\n

    1. SVG Rectangle: 
    <\/strong><\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    width<\/strong><\/td>\r\nheight<\/strong><\/td>\r\nx<\/td>\r\ny<\/td>\r\nrx<\/td>\r\nry<\/td>\r\n<\/tr>\r\n
    width of rect<\/td>\r\nheight of rect<\/td>\r\ntop-left corner position<\/td>\r\ntop left y position<\/td>\r\nradius to round corners (def 0) , top side, bottom side round<\/td>\r\nradius to round corners from left, right side (def 0)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
    \r\n
    <svg width=\"300\" height=\"130\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <rect width=\"200\" height=\"100\" x=\"10\" y=\"10\" rx=\"50\" ry=\"50\" fill=\"blue\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg width=\"100\" height=\"130\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <rect width=\"200\" height=\"100\" x=\"10\" y=\"10\" rx=\"50\" ry=\"30\" fill=\"blue\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    A rectangle with pink stroke and blue colors , blue color opacity 10%, stroke opacity: 90%<\/p>\r\n
    <rect width=\"200\" height=\"100\" x=\"10\" y=\"10\" rx=\"50\" ry=\"30\" style=\"fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9\" \/><\/code><\/pre>\r\n
    <\/p>\r\n
    2. SVG Circle:<\/strong><\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    r<\/td>\r\ncx<\/td>\r\ncy<\/td>\r\n<\/tr>\r\n
    Required. The radius of the circle<\/td>\r\nThe x-axis center of the circle. Default is 0<\/td>\r\nThe x-axis center of the circle. Default is 0<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
    \r\n
    <svg height=\"100\" width=\"100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <circle r=\"45\" cx=\"50\" cy=\"50\" fill=\"red\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg height=\"100\" width=\"100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <circle r=\"45\" cx=\"0\" cy=\"0\" fill=\"red\" stroke=\"green\" stroke-width=\"3\" opacity=\"0.5\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    3. SVG Ellipse : <\/strong>ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.<\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    rx<\/td>\r\nry<\/td>\r\ncx<\/td>\r\ncy<\/td>\r\n<\/tr>\r\n
    Required. The x radius of the ellipse from center<\/td>\r\nRequired. The y radius of the ellipse<\/td>\r\nThe x-axis center of the ellipse. Default is 0<\/td>\r\n\r\n
    \r\n\r\n\r\n\r\n
    The y-axis center of the ellipse. Default is 0<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
    \r\n
    <svg height=\"140\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <ellipse rx=\"100\" ry=\"50\" cx=\"120\" cy=\"80\"\r\n  style=\"fill:yellow;stroke:green;stroke-width:3\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg height=\"500\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <ellipse cx=\"240\" cy=\"100\" rx=\"220\" ry=\"30\" fill=\"purple\" \/>\r\n  <ellipse cx=\"220\" cy=\"70\" rx=\"190\" ry=\"20\" fill=\"lime\" \/>\r\n  <ellipse cx=\"0\" cy=\"0\" rx=\"170\" ry=\"70\" fill=\"yellow\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n
     <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    4.SVG Line<\/strong><\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    x1<\/td>\r\ny1<\/td>\r\nx2<\/td>\r\ny2<\/td>\r\n<\/tr>\r\n
    The start of the line on the x-axis<\/td>\r\nThe start of the line on the y-axis<\/td>\r\nThe end of the line on the x-axis<\/td>\r\n\r\n
    \r\n\r\n\r\n\r\n
    The end of the line on the y-axis<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
    \r\n
    <svg height=\"200\" width=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <line x1=\"0\" y1=\"0\" x2=\"100\" y2=\"50\" style=\"stroke:red;stroke-width:2\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg height=\"50\" width=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <line x1=\"0\" y1=\"10\" x2=\"250\" y2=\"10\" style=\"stroke:red;stroke-width:12\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    5. SVG <polygon><\/strong><\/p>\r\n
    contains at least three sides,
    made of straight lines, and the shape is \"closed\" (it automatically connects the last point with the first).<\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    points attribute<\/td>\r\n<\/tr>\r\n
    Required. The list of points of the polygon. Each point must contain an x coordinate and a y coordinate <polygon points=\"x1,y1 x2,y2 x3,y3 ... xn,yn\" \/><\/strong>

    <\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    \r\n
    <svg height=\"220\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polygon points=\"100,10 150,190 50,190\" style=\"fill:lime;stroke:purple;stroke-width:3\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg height=\"260\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polygon points=\"220,10 300,210 170,250 123,234\" style=\"fill:lime;stroke:purple;stroke-width:3\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n<\/tr>\r\n
    \r\n
    <svg height=\"280\" width=\"360\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polygon points=\"150,15 258,77 258,202 150,265 42,202 42,77\"\r\n  style=\"fill:lime;stroke:purple;stroke-width:3\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg height=\"210\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polygon points=\"100,10 40,198 190,78 10,78 160,198\"\r\n  style=\"fill:lime;stroke:purple;stroke-width:5;\" \/>\r\n<\/svg><\/code><\/pre>\r\n
     <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    The fill-rule attribute defines the algorithm to use to specify the inside part of a shape<\/p>\r\n
    <svg height=\"210\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polygon points=\"100,10 40,198 190,78 10,78 160,198\"\r\n  style=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n
     <\/p>\r\n
    6.SVG Polyline : <\/strong>create any shape that consists of only straight lines (that is connected at several points).<\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    points attribute : <polyline <\/span>points=\"x1,y1 x2,y2 x3,y3 ... xn,yn\" \/><\/td>\r\n<\/tr>\r\n
    Required. The list of points of the polyline. Each point must contain an x coordinate and a y coordinate<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
    \r\n
    <svg height=\"210\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polyline points=\"0,0 50,150 100,75 150,50 200,140 250,140\"\r\n  style=\"fill:none;stroke:green;stroke-width:3\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n
    		\r\n
    <svg height=\"180\" width=\"500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <polyline points=\"0,40 40,40 40,80 80,80 80,120 120,120 120,160\"\r\n  style=\"fill:yellow;stroke:red;stroke-width:4\" \/>\r\n<\/svg><\/code><\/pre>\r\n
    <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
     <\/p>\r\n
    7.SVG <path> :  <\/strong>Paths are used to create simple or complex shapes combining several straight or curved lines.<\/p>\r\n<\/colgroup>\r\n\r\n\r\n\r\n
    attribute: <\/strong>d      Required. A set of commands which define the path.<\/td>\r\n<\/tr>\r\n
    \r\n
      \r\n
    1. M = moveto (move from one point to another point)<\/li>\r\n
    2. L = lineto (create a line)<\/li>\r\n
    3. H = horizontal lineto (create a horizontal line)<\/li>\r\n
    4. V = vertical lineto (create a vertical line)<\/li>\r\n
    5. C = curveto (create a curve)<\/li>\r\n
    6. S = smooth curveto (create a smooth curve)<\/li>\r\n
    7. Q = quadratic Bézier curve (create a quadratic Bézier curve)<\/li>\r\n
    8. T = smooth quadratic Bézier curveto (create a smooth quadratic Bézier curve)<\/li>\r\n
    9. A = elliptical Arc (create a elliptical arc)<\/li>\r\n
    10. Z = closepath (close the path)<\/li>\r\n<\/ol>\r\nNote: All of the commands above can also be expressed in lower case<\/strong>. Upper case means absolutely positioned, lower case means relatively positioned.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
      \r\n
      <svg height=\"210\" width=\"400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <path d=\"M150 5 L75 200 L225 200 Z\"\r\n  style=\"fill:none;stroke:green;stroke-width:3\" \/>\r\n<\/svg><\/code><\/pre>\r\n
      M150 5      → Move to (150, 5)           [Starting point — no line yet]
      L75 200     → Line to (75, 200)          [Line from (150, 5) to (75, 200)]
      L225 200    → Line to (225, 200)         [Line from (75, 200) to (225, 200)]
      Z           → Close path (back to M150 5)<\/p>\r\n
        <\/p>\r\n
             (150,5)
                  +
                 \/ \\
                \/   \\
               \/     \\
       (75,200)+-------+ (225,200)<\/p>\r\n<\/td>\r\n
      		\r\n
      <svg height=\"400\" width=\"450\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n   <path id=\"lineAB\" d=\"M 100 350 l 150 -300\" stroke=\"red\" stroke-width=\"4\"\/>\r\n<\/svg><\/code><\/pre>\r\n
      Its small L, so it will Draw Line (relative to current position)<\/p>\r\n
      <\/p>\r\n
      1. Move pointer to 100,350 <<<<<M 100 350<\/strong> l 150 -300<\/p>\r\n
      +150 in X → to 250
      -300 in Y → to 50
      2. draw line at (250,50)<\/p>\r\n
       <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/colgroup>\r\n\r\n\r\n
      \r\n
      <svg height=\"400\" width=\"450\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n   <path id=\"lineAC\" d=\"M 100 350 q 150 -300 300 0\" stroke=\"blue\" stroke-width=\"4\" fill=\"none\"\/>\r\n<\/svg><\/code><\/pre>\r\n

      ??? M 100 350 >Move to (100, 350<\/strong>) — sets the starting point of the path. No drawing yet.<\/p>\r\n
      q 150 -300 300 0 >>quadratic curve, using relative coordinates
      ??? Draw a quadratic Bézier curve:
      First pair<\/strong> 150 -300: relative to the current position So control point = (100 + 150, 350 - 300) = (250, 50)
      Second pair<\/strong> 300 0: relative end point: (100 + 300, 350 + 0) = (400, 350)
      <\/strong>???? The curve goes from (100,350) → (400,350), bending toward the control point (250,50).<\/p>\r\n<\/td>\r\n
      		\r\n
      <svg height=\"400\" width=\"450\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M 100 350 l 150 -300\" stroke=\"red\" stroke-width=\"4\"\/>\r\n<path d=\"M 250 50 l 150 300\" stroke=\"red\" stroke-width=\"4\"\/>\r\n<path d=\"M 175 200 l 150 0\" stroke=\"green\" stroke-width=\"4\"\/>\r\n<path d=\"M 100 350 q 150 -300 300 0\" \r\n\tstroke=\"blue\" stroke-width=\"4\" fill=\"none\"\/>\r\n\r\n<g stroke=\"black\" stroke-width=\"3\" fill=\"black\">\r\n<circle id=\"pointA\" cx=\"100\" cy=\"350\" r=\"4\" \/>\r\n<circle id=\"pointB\" cx=\"250\" cy=\"50\" r=\"4\" \/>\r\n<circle id=\"pointC\" cx=\"400\" cy=\"350\" r=\"4\" \/>\r\n<\/g>\r\n\r\n<g font-size=\"30\" font-family=\"sans-serif\" \r\n\tfill=\"green\" text-anchor=\"middle\">\r\n<text x=\"100\" y=\"350\" dx=\"-30\">A<\/text>\r\n<text x=\"250\" y=\"50\" dy=\"-10\">B<\/text>\r\n<text x=\"400\" y=\"350\" dx=\"30\">C<\/text>\r\n<\/g>\r\n<\/svg><\/code><\/pre>\r\n
      <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
      https:\/\/www.w3schools.com\/graphics\/svg_path.asp<\/p>","category_id":"18","is_private":"0","created_at":"2025-07-24T20:38:28.000000Z","updated_at":"2025-07-24T22:11:54.000000Z","category":{"id":18,"user_id":"1","name":"Tutorials","slug":"tutorials-n3lw","parent_id":null,"created_at":"2023-04-01T17:24:32.000000Z","updated_at":"2023-04-01T17:24:32.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"SVG stands for Scalable Vector Graphics. Its XML format, not lose quality, supported by browsers. SVG has some predefined shape elements tha - SVG Tutorial (Updated: July 24, 2025) - Read more about SVG Tutorial at my programming site [SITE]","categories":[]}