Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • SVG Shapes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 175
    Comment on it

    Hello Readers,

    Today's topic is how to create a SVG?- Every shapes in SVG are based on coordinates (x and y axis). So if you want to edit ,create and script, you have to know about coordinates.

    SVG has pre define shape like,

    1) Circle
    2) Rectangle
    3) Polyline
    4) Polygon
    5) Ellipse
    6) Line
    7) Path

    For example:-

    <svg height="" width="">
        <rect x="" y="" width="" height="" fill="" stroke="" stroke-width=""/>
        <circle r="" cx="" cy="" fill="" stroke="" stroke-width=""/>
        <ellipse rx="" ry="" cx="" cy="" fill="" stroke="" stroke-width=""/>
        <polygon points="" fill="" stroke="" stroke-width=""/>
        <line x1="" y1="" x2="" y2="" stroke="" stroke-width=""/>
        <path d="" stroke-width="" stroke="" fill=""/>
    </svg>
    

    Here X = is the value of x axis and y= is the value of y axis
    fill = is work like css's background-color mean to fill color on background
    stroke define the object strock
    stroke-width = for thickness of stroke.
    stroke-opacity = stroke opacity

    Circle have not height and width so height and width define is by,
    r = Radius, cx and cy same as x and y
    rx = for horizontal radius and ry = vertically radius
    points = is depands on your shape its write like (points="0,90 10,140 90,120")
    Its a path for triangle the and every point is show x and y axis distance (points="x,y x,y x,y")
    and for line x1 and y1 are start point of their coordinates and x2,y2 are end points.

    Path

    I think it's an important tag of SVG because you can make every type of shape using this

    <path d="" stroke-width="" stroke="" fill=""/>
    

    d= Its show the path direction L = for start next direction, M = start point, H = horizontal lineto, V = vertical lineto, C = curveto, S = smooth curveto, Q = for quadraticurve T = smooth quadratic Bzier curveto, A = ellipse arc, Z = end point

    Note:- SVG has about 270 type of attributes.

    An example of shapes:

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: