Scribd Logo
Upload

Welcome to Scribd!

  • SVG (Scalable Vector Graphic)

    Uploaded by

    Erlita Singgih Maulani
    37 views15 pages
    The document discusses Scalable Vector Graphics (SVG) shapes and paths. It provides examples of how to code different basic SVG shapes like lines, rectangles, circles, ellipses, polygons and paths using XML tags. It also explains the SVG coordinate system and some of the path commands like M, L, C, S and Z to draw straight and curved lines. There are also examples of tasks to create several SVG shapes using provided coordinate points and attributes to set properties like color, width and opacity.

    Original Description:

    gjj

    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) shapes and paths. It provides examples of how to code different basic SVG shapes like lines, rectangles, circles, ellipses, polygons and paths using XML tags. It also explains the SVG coordinate system and some of the path commands like M, L, C, S and Z to draw straight and curved lines. There are also examples of tasks to create several SVG shapes using provided coordinate points and attributes to set properties like color, width and opacity.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    37 views15 pages

    SVG (Scalable Vector Graphic)

    Uploaded by

    Erlita Singgih Maulani
    The document discusses Scalable Vector Graphics (SVG) shapes and paths. It provides examples of how to code different basic SVG shapes like lines, rectangles, circles, ellipses, polygons and paths using XML tags. It also explains the SVG coordinate system and some of the path commands like M, L, C, S and Z to draw straight and curved lines. There are also examples of tasks to create several SVG shapes using provided coordinate points and attributes to set properties like color, width and opacity.

    Copyright:

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

    SVG (Scalable Vector

    Graphic)
    Grafika Komputer 2018
    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)
    TUGAS

    1. Buatlah 2 buah garis dengan koordinat masing masing garis adalah


    Garis Pertama : X1,Y1 (0,0) X2,Y2 (100,0 ) stroke width=2 warna merah
    Garis Kedua : X1,Y1 (0,50) X2,Y2 (100,50) stroke width =8 RGB (255,0,127)
    2. Buatlah sebuah persegi panjang dengan koordinat awal X1,Y1(0,100) dengan
    panjang =100, lebar=50 ,warna persegi RGB(111,0,255) , warna garis tepi
    persegi Blue ,stroke width=3,fill opacity=0.5, stroke opacity=0.9
    3. Buatlah sebuah lingkaran dengan pusat cx,cy(50,50) dengan r=50 warna
    lingkaran green, warna garis tepi lingkaran rgb (0,255,255),stroke width=4 fill
    opacity=0.9, stroke opacity=0.4
    4. Buatlah sebuah polygon dengan koordinat X1 Y1 (0,50) X2 Y2(100,50) X3 Y3
    (50,100) warna polygon lime , warna garis tepi polygon maroon ,stroke
    width=2 ,fill opacity=0.9, stroke opacity=0.1

    You might also like