Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

140 <svg> <rect x="0" y="0" height="300" width="150" style="fill: green"/> <image x="1" y="1" width="148" height="148" href="laptopmee.png" /> <text x="2" y="45" font-family="Verdana" font- size="27" stroke="#ffffff" fill="#CC46BF"> My Laptop</text> </svg> </body> </html> Referensi: w3schools.com.(modifikasi) Seperti program-program sebelumnya, pada contoh ini bagian awal kita akan sediakan dulu svg dengan menggunakan tag <svg>..</svg>. Pada contoh program kita akan menampilkan gambar ini dengan latar kotak dengan menambahkan code <rect x="0" y="0" height="300" width="150" style="fill: green"/>. Jadi kita akan membuat sebuah kotak dengan tag <rect> yang mana kotak ini kita gambar muali dari titik (0,0) dan memiliki ukuran tinggi 150 dengan lebar 300. Tidak lupa pemberian fill pada kotak dengan warna hijau. Selanjutnya karna tujuan kita akan menampilkan gambar maka disini tambahkan sebuah code <image x="1" y="1" width="148" height="148" href="laptopmee.png" />. Code ini dimulai dengan tag

RkJQdWJsaXNoZXIy MTM3NDc5MQ==