Scribd Logo
Upload

Welcome to Scribd!

  • SVG (Scalable Vector Graphic)

    Uploaded by

    Ilham Kurniawan
    22 views13 pages
    The document discusses Scalable Vector Graphics (SVG), including basic SVG shapes like lines, rectangles, circles, ellipses, polygons, and paths. It explains how to code these shapes using SVG markup, and provides details on path commands like M, L, C, S and attributes like points, x1, y1, cx, cy. Coordinate systems and properties for filling, stroking and styling shapes are also covered.

    Original Description:

    kjlkhkjhk

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses Scalable Vector Graphics (SVG), including basic SVG shapes like lines, rectangles, circles, ellipses, polygons, and paths. It explains how to code these shapes using SVG markup, and provides details on path commands like M, L, C, S and attributes like points, x1, y1, cx, cy. Coordinate systems and properties for filling, stroking and styling shapes are also covered.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views13 pages

    SVG (Scalable Vector Graphic)

    Uploaded by

    Ilham Kurniawan
    The document discusses Scalable Vector Graphics (SVG), including basic SVG shapes like lines, rectangles, circles, ellipses, polygons, and paths. It explains how to code these shapes using SVG markup, and provides details on path commands like M, L, C, S and attributes like points, x1, y1, cx, cy. Coordinate systems and properties for filling, stroking and styling shapes are also covered.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    SVG (Scalable Vector

    Graphic)
    Grafika Komputer 2016
    SVG
    <html>
    <body>

    <h1>My first SVG</h1>

    <svg width="100" height="100">


    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    </body>
    </html>
    Sistem Koordinat
    0,0 X

    Y
    Path
    SVG Shape M = moveto
    L = lineto (abs)
    l = lineto (relative)

    Objek Dasar H = horizontal lineto (abs)

    Line H = horizontal lineto (relative)

    Rectangle V = vertical lineto (abs)

    Circle V = vertical lineto (relative)

    Ellipse C = curveto

    Polyline S = smooth curveto

    Polygon Q = quadratic Bezier curve


    T = smooth quadratic Bezier curveto
    A = elliptical Arc
    Z = closepath
    Line

    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-


    width:2" />
    <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2" />

    (x1,y1)
    ( 0,0 )

    (x2,y2)
    ( 200,200 )
    Rectangle

    <rect x="50" y="20" width="300" height="100" style="fill:rgb(0,0,255);stroke-


    width:3;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9" />
    <rect x="50" y="20" width="300" height="100" fill="blue" stroke-width="3"
    stroke="black" fill-opacity="0.1" stroke-opacity="0.9" />

    (x,y)

    height

    width
    Circle

    <circle cx="50" cy="50" r="40" style="stroke:black;stroke-width:3;fill=red" />


    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

    (cx,cy)

    r
    Ellipse

    <ellipse cx="200" cy="80" rx="100" ry="50"


    style="fill:yellow;stroke:purple;stroke-width:2" />
    <ellipse cx="200" cy="80" rx="100" ry="50" fill="yellow" stroke="purple" stroke-
    width="2"/>

    ry

    (cx,cy) rx
    Polyline

    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"


    style="fill:none;stroke:black;stroke-width:3" />
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
    fill="none" stroke="black" stroke-width="3" />

    (20,20) (40,25)
    (60,40)

    (80,120) (120,140)

    (200,180)
    Polygon

    <polygon points="200,10 250,190


    160,210" style="fill:lime;stroke:purple;stroke-width:1" />
    <polygon points="200,10 250,190 160,210" fill="lime" stroke="purple" stroke-
    width="1" />
    (200,10)

    (250,190)
    (160,210)
    Path

    <path d="M150 0 L75 200 L225 200 Z" />

    M150 0 L75 200 L225 200 Z


    (command)(x1)(spasi)(y1)

    Link Materi Path :


    https://www.w3.org/TR/SVG/paths.html
    Path Garis lurus
    M x y = titik awal path (x,y)

    L x y = membuat garis lurus ke koordinat (x,y)

    l x y = membuat garis lurus ke suatu koordinat relatif dengan koordinat


    sebelumnya

    H x = membuat garis lurus sejajar sumbu x dari suatu titik menuju titik absis
    yang ditentukan dengan angka pada variabel x

    h x = membuat garis lurus sejajar sumbu x dari suatu titik menuju titik absis
    relatif dari titik sebelumnya, ditentukan dengan angka pada variable x.

    V y = membuat garis lurus sejajar sumbu y dari suatu titik menuju titik ordinat
    yang ditentukan dengan angka pada variabel y

    v y = membuat garis lurus sejajar sumbu y dari suatu titik menuju titik
    ordinat relatif dari titik sebelumnya, ditentukan dengan angka pada variable
    y.
    Z = membuat garis lurus ke koordinat awal path M(x,y)
    Path - Kurva

    C x1 y1 x2 y2 x3 y3 = membuat Bezier curve dengan koordinat titik kontrol di awal


    lengkungan (x1,y1), koordinat titik kontrol di akhir lengkungan (x2,y2), dan
    koordinat titik akhir kurva (x3,y3)

    S x1 y1 x2 y2 = membuat Bezier curve dengan koordinat titik kontrol mengikuti C/S


    sebelumnya, jika tidak ada C/S maka titik sebelumnya menjadi titik kontrol,
    koordinat titik kontrol di akhir lengkungan (x1,y1), dan koordinat titik akhir kurva
    (x2,y2)

    Q x1 y1 x2 y2 = membuat quadratic Bezier curve dengan koordinat titik kontrol


    lengkungan (x1,y1) dan koordinat titik akhir kurva (x2,y2)

    T x1 y1 = membuat quadratic Bezier curve dengan koordinat titik kontrol mengikuti


    Q/T sebelumnya, jika tidak ada Q/T maka titik sebelumnya menjadi titik kontrol,
    dan koordinat titik akhir kurva (x1,y1)

    You might also like