Membuat / Menulis SVG Code

*RePosting dari rumah lama.

Yuuuk mari langsung aja yak??

ini adalah termasuk dalam basic advance dalam pembuatan manual SVG code menurut saya.
di sini akan saya ambil contoh untuk device 480x360 (onyx)
untuk menulisnya gunakan Notepad++

sebelum mulai, penulisan svg code ini untuk "fix icon" bukan yang bisa ditentukan sendiri oleh user. 
Mariiiii,,
Pertama, siapkan dulu icon2 nya (image extention .png) misal size nya 100x100 pixel dan saya kasih nama : Messages.png

Quote:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2000/svghttp://www.plazmic.com/svg/schema/svg.xsd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:pz="http://www.plazmic.com/plazmic_extents" id="TESTING" xml:space="default" width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet">

    <g id="TB_Messages">
        <image id="Msg" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages.png"/>
        <image id="Msg-fokus" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages_f.png"/>
        <set attributeName="display" begin="TB_Messages.focusin" to="none" xlink:href="#Msg"/>
        <set attributeName="display" begin="TB_Messages.focusin" to="inline" xlink:href="#Msg-fokus"/>
        <set attributeName="display" begin="TB_Messages.focusout" to="inline" xlink:href="#Msg"/>
        <set attributeName="display" begin="TB_Messages.focusout" to="none" xlink:href="#Msg-fokus"/>
        <loadScene begin="TB_Messages.activate" xlink:href="x-exec://net_rim_bb_messaging_app.Messages"/>
    </g>
</svg>

Simple kan?? hehehehe
yuuuk, kita bahas tiap perintah nya :

Code:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:pz="http://www.plazmic.com/plazmic_extents" id="TESTING" xml:space="default" width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet">

code bagian ini harus ada karena itu basic command nya, bisa anda peroleh dari hasil compile ataupun dari composser yang d export ke .svg

id="TESTING" = id dari svg itu sendiri..terserah mo d kasih nama apa aja juga boleh..

viewBox="0 0 480 360" = d sini saya setting "x" dan "y" pada posisi "0" (pojok kiri atas dari layar)
untuk normal nya dari composser dia akan tertulis "-240 -180 480 360" (layar d bagi 2) ... dalam perhitungan menentukan posisi saya kira akan lebih enak jika pakai yg "0" 

Code:

<g id="TB_Messages">

yang akan menunjukkan id button dari image yg kita buat.

Code:

<image id="Msg" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages.png"/>

id untuk menampilkan dari image pada posisi normal

Code:

<image id="Msg-fokus" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages_f.png"/>

id untuk menampilkan dari image pada posisi fokus

Code:

<set attributeName="display" begin="TB_Messages.focusin" to="none" xlink:href="#Msg"/>
<set attributeName="display" begin="TB_Messages.focusin" to="inline" xlink:href="#Msg-fokus"/>
<set attributeName="display" begin="TB_Messages.focusout" to="inline" xlink:href="#Msg"/>
<set attributeName="display" begin="TB_Messages.focusout" to="none" xlink:href="#Msg-fokus"/>

adalah setting untuk image fokus dan normalnya. lihat pada bagian begin dan to sertaxlink:hrefnya

Code:

<loadScene begin="TB_Messages.activate" xlink:href="x-exec://net_rim_bb_messaging_app.Messages"/>

adalah untuk menampilkan isi / fitur dari image tersebut. (di sini saya ambil contoh untuk mengakses fitur Message dari bb kita)

Sekian dulu simple tutorial ini..
jika ada permasalahan, silahkan post d sini aja yak? biar kita pecahkan sama2...

terimakasih..
Make It Better Than Ever