LAPORAN PRAKTIKUM

PENGOLAHAN MULTIMEDIA

Scalable Vector Graphics (SVG)

DISUSUN OLEH:
Ahmad Rifa’i (1610131210002)

PROGRAM STUDI PENDIDIKAN ILMU KOMPUTER

JURUSAN PENDIDIKAN MATEMATIKA DAN IPA
FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN
UNIVERSITAS LAMBUNG MANGKURAT
2019
A. IDENTITAS PRAKTIKUM

Nomor praktikum : 05

Tanggal praktikum : 2019

Tempat praktikum : R25

B. TEORI DAN HASIL PRAKTEK

Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan

XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar
vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh Word
Wide Web Consortium (W3C) sejak tahun 1999.

Sebuah gambar dengan format SVG disimpan dalam bentuk file XML. Ini
berarti, SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan
dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi
teks apa saja.

W3schools SVG :

1. SVG Intro
Fungsi :

<h1>My first SVG</h1> //sub bab

<svg width="100" height="100"> //untuk lebar dan tinggi
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" /> //untuk membuat lingkaran menggunakan “circle”
dengan sumbu x dan y (cx, cy, r). Stroke untuk garis luar lingkaran dan
warna, stroke-width untuk tebal garis tersebut.
</svg> //penutup
2. SVG in HTML5

<h1>My first SVG</h1> //sub bab

<svg width="100" height="100"> //untuk lebar dan tinggi
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" /> //untuk membuat lingkaran menggunakan “circle”
dengan sumbu x dan y (cx, cy, r). Stroke untuk garis luar lingkaran dan
warna, stroke-width untuk tebal garis tersebut.
</svg> //penutup
3. SVG Rectangle
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0)" /> //untuk membuat persegi panjang
menggunakan “rect”. Style=”fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0) untuk warna dan tebal garis persegi panjang
tersebut.
4. SVG Rectangle Example 2
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-
opacity:0.9" /> //fungsi fill-opacity:0.1 untuk mempertua warna
ditengah. Fungsi stroke-opacity:0.9 untuk mempertua warna garis
diluar.

5. SVG Rectangle Example 3

<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> //fungsi fill-
opacity:0.5 untuk mempertua warna ditengah.
6. SVG Rectangle Example 4

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"

style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> //rx="20"
ry="20" untuk membuat ujung garis kotak lekuk.

7. SVG Circle
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" /> //cx dan cy atribut menentukan koordinat x dan y dari pusat
lingkaran. Jika cx dan cy dihilangkan, pusat lingkaran diatur ke (0,0)
Atribut r mendefinisikan jari-jari lingkaran.

8. SVG Ellipse

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

style="fill:yellow;stroke:purple;stroke-width:2" /> //Atribut cx
mendefinisikan koordinat x dari pusat ellipse, atribut cy mendefinisikan
y koordinat pusat ellipse, atribut rx mendefinisikan radius horizontal,
atribut ry mendefinisikan radius vertikal.
9. SVG Ellipse Example 2

<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />

<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
10. SVG Ellipse Example 3

<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />

<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />

11. SVG Line

<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" /> //Atribut x1
mendefinisikan awal baris pada sumbu x, Atribut y1 mendefinisikan
awal baris pada sumbu y, Atribut x2 mendefinisikan akhir baris pada
sumbu x, Atribut y2 mendefinisikan akhir garis pada sumbu y
12. SVG Polygon
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" /> //Atribut poin
mendefinisikan x dan y koordinat untuk setiap sudut poligon

13. SVG Polygon Example 2

 <polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />

14. SVG Polygon Example 3

<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
15. SVG Polygon Example 4
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>

16. SVG Polyline

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" /> //Atribut poin
mendefinisikan daftar poin (pasang x dan y koordinat) yang diperlukan
untuk menggambar polyline.
17. SVG Polyline Example 2
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />

18. SVG Path

<path d="M150 0 L75 200 L225 200 Z" />
 <Path> elemen digunakan untuk mendefinisikan jalan. Perintah berikut
tersedia untuk data path :

• M = MoveTo
• L = LineTo
• H = LineTo horisontal
• V = LineTo vertikal
• C = curveto
• S = halus curveto
• Q = kurva Bézier kuadrat
• T = halus kuadrat Bezier curveto
• A = elips Arc
• Z = closepath

Catatan : Semua perintah di atas juga dapat dinyatakan dengan huruf

yang lebih rendah. Huruf berarti benar-benar diposisikan, kasus yang
lebih rendah berarti relatif diposisikan.

19. SVG Path Example 2

<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-
width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-
width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5"
fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
20. SVG Text
<text x="0" y="15" fill="red">I love SVG!</text> //<text> elemen
dapat diatur dalam sejumlah sub-kelompok dengan <tspan>
elemen. Setiap <tspan> elemen dapat berisi format dan posisi yang
berbeda. Teks pada beberapa baris (dengan <tspan> elemen): Several
lines: First line. Second line.
21. SVG Text Example 2
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love
SVG</text>

22. SVG Text Example 3

<text x="10" y="20" style="fill:red;">Several lines:

<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text>
23. SVG Text Example 4

<svg height="30" width="200"

xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href=https://www.w3schools.com/graphics/ target="_blank">
<text x="0" y="15" fill="red">I love SVG!</text>
</a>
</svg>
24. SVG Stroking

<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
//Stroke, Stroke lebar, Stroke linecap, Stroke dasharray. Semua sifat
stroke dapat diterapkan untuk setiap jenis garis, teks dan garis besar
unsur-unsur seperti lingkaran.
25. SVG Stroking width Property

<g fill="none" stroke="black">

<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g> //Properti stroke lebar mendefinisikan ketebalan garis, teks atau
garis besar unsur. Properti Stroke mendefinisikan warna garis, teks atau
garis besar unsur
26. SVG Stroking Linecap Property

<g fill="none" stroke="black" stroke-width="6">

<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g> //Properti stroke linecap mendefinisikan berbagai jenis akhiran
untuk jalan terbuka.
27. SVG Stroking Dasharray Property

<g fill="none" stroke="black" stroke-width="4">

<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g> //Properti stroke dasharray digunakan untuk membuat garis putus-
putus.
28. SVG Blur Effects

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support SVG filters.</p>

<svg height="110" width="110">

<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />

</svg> //Semua filter SVG internet didefinisikan dalam <defs> elemen.

<defs> elemen singkat untuk definisi dan mengandung definisi elemen
khusus (seperti filter). <filter> elemen digunakan untuk mendefinisikan
filter SVG. <filter> elemen memiliki atribut id yang diperlukan yang
 mengidentifikasi filter. Grafik kemudian menunjuk ke filter untuk
digunakan.

• Atribut id dari <filter> elemen mendefinisikan nama yang unik

untuk filter
• Efek blur didefinisikan dengan <feGaussianBlur> elemen
• Dalam = "SourceGraphic" bagian mendefinisikan bahwa efek
dibuat untuk seluruh elemen
• Atribut stdDeviation mendefinisikan jumlah blur
• Atribut filter dari <rect> elemen link elemen ke "f1" filter

29. SVG Drop Shadows

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support SVG filters.</p>

<svg height="120" width="120">

<defs>
 <filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"
/>
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg> //Semua filter SVG didefinisikan dalam <defs> elemen. <defs>
elemen singkat untuk definisi dan mengandung definisi elemen khusus
(seperti filter). <filter> elemen digunakan untuk mendefinisikan filter
SVG. The <filter> elemen memiliki atribut id yang diperlukan yang
mengidentifikasi filter. Grafik kemudian menunjuk ke filter untuk
digunakan <feOffset> elemen digunakan untuk membuat penurunan
efek bayangan. Idenya adalah untuk mengambil grafis SVG (gambar
atau elemen) dan memindahkannya sedikit dalam bidang xy. Contoh
pertama offset persegi panjang (dengan <feOffset>), kemudian berbaur
asli di atas gambar offset (dengan <feBlend>):

• Atribut id dari <filter> elemen mendefinisikan nama yang unik

untuk filter
• Atribut filter dari <rect> elemen link elemen ke "f1" filter
30. SVG Drop Shadows Example 2

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support SVG filters.</p>
<svg height="140" width="140">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"
/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg> //Atribut stdDeviation dari <feGaussianBlur> elemen
mendefinisikan jumlah blur.
31. SVG Drop Shadows Example 3

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support SVG filters.</p>

<svg height="140" width="140">

<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
32. SVG Drop Shadows Example 4

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do

not support SVG filters.</p>

<svg height="140" width="140">

<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"
/>
<feColorMatrix result = "matrixOut" in = "offOut" type =
"matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur result="blurOut" in="matrixOut"
stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>
</defs>
 <rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg> //<feColorMatrix> filter digunakan untuk mengubah warna pada
gambar mengimbangi lebih dekat ke hitam. Tiga nilai dari '0,2' dalam
matriks semua mendapatkan dikalikan dengan saluran merah, hijau dan
biru. Mengurangi nilai-nilai mereka membawa warna lebih dekat ke
hitam (hitam adalah 0).

33. SVG Linear

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%"
y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-
opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-
opacity:1" />
</linearGradient>
</defs>
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
//gradien horisontal dibuat ketika y1 dan y2 adalah sama dan x1 dan x2
berbeda, gradien vertikal dibuat ketika x1 dan x2 adalah sama dan y1
dan y2 berbeda, gradien sudut dibuat ketika x1 dan x2 berbeda dan y1
dan y2 berbeda.
• Atribut id dari <linearGradient> mendefinisikan nama yang unik
untuk gradien.
• x1 itu, x2, y1, y2 atribut dari <linearGradient> tag menentukan
awal dan akhir posisi gradien.
• Rentang warna untuk gradien dapat terdiri dari dua atau lebih
warna. Setiap warna ditentukan dengan tag <berhenti>. Atribut
offset digunakan untuk mendefinisikan mana warna gradien
mulai dan berakhir.
• Atribut fill menghubungkan elemen elips untuk gradien.

34. SVG Linear Example 2

<defs>
 <linearGradient id="grad1" x1="0%" y1="0%" x2="0%"
y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-
opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-
opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

35. SVG Linear Example 3

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%"
y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-
opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-
opacity:1" />
 </linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="150" y="86">SVG</text>

36. SVG Radial

<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%"
fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"
/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
 • Atribut id dari <radialGradient> mendefinisikan nama yang unik
untuk gradien.
• cx itu, cy dan atribut r menentukan lingkaran terluar dan fx dan
fy mendefinisikan lingkaran terdalam.
• Rentang warna untuk gradien dapat terdiri dari dua atau lebih
warna. Setiap warna ditentukan dengan tag <berhenti>. Atribut
offset digunakan untuk mendefinisikan mana warna gradien
mulai dan berakhir.
• Atribut fill menghubungkan elemen elips untuk gradien.

37. SVG Radial Example 2

<defs>
<radialGradient id="grad1" cx="20%" cy="30%" r="30%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-
opacity:0" />
 <stop offset="100%" style="stop-color:rgb(0,0,255);stop-
opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
C. IDENTITAS PRAKTIKAN

NIM : 1610131210002
Nama : Ahmad Rifa’i
Alamat : Banjarmasin Tengah, Jl. Batu Benawa Raya
No HP : 083142307087

Mengetahui, Banjarmasin,
....................................2019

Asisten Ahmad Rifa’i