HTML SVG

Menggunakan imej dalam HTML adalah hebat untuk tapak web yang kaya dengan multimedia. Apa yang anda perlu lakukan ialah menambah tag pada kod HTML, dan viola, penyemak imbas anda akan memaparkan dan juga menambah pautan ke imej pilihan anda. Ia menjadi sedikit merisaukan apabila anda mengetahui bahawa imej atau rajah akan dizum masuk kerana JPG atau PNG tidak akan menunjukkan sebarang butiran lanjut setelah ia dizum melepasi peleraiannya. SVG adalah penyelesaian kepada masalah ini. SVG bermaksud Grafik Vektor Boleh Skala. Seperti namanya, ini boleh dizum masuk seberapa banyak yang diperlukan, dan butirannya tidak pernah hilang. SVG tidak eksklusif untuk teknologi web, tetapi menggunakannya dalam HTML adalah sangat kemas. SVG berguna untuk gambar rajah, vektor, carta dan graf dalam penyemak imbas.

Sintaks Membenamkan SVG dalam HTML:

Sama seperti menggunakan kanvas dalam HTML5, terdapat teg mudah yang boleh anda gunakan untuk membenamkan SVG dalam halaman HTML5.

Sintaks:

<svg width="width here" height="height here ">
…. …. …. ….
</svg>

Contoh SVG dalam HTML

Diberikan di bawah adalah beberapa contoh vektor yang boleh dibuat dan dibenamkan dalam HTML5:

Contoh #1 – Melukis segi empat tepat melalui SVG dalam HTML

Kod:

<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"></rect>
Sorry but this browser does not support inline SVG.
</svg>

Output:

Contoh #2 – Melukis segi empat sama dengan bucu bulat dalam SVG

Untuk segi empat sama dengan bucu bulat, kita perlu menentukan jejari bucu dengan menggunakan rx, ry selain daripada saiz dan dimensi segi empat sama.

Kod:

<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style="fill:green stroke:blue; stroke-width:5 ; opacity:0.5"></rect>
Sorry but this browser does not support inline SVG.
</svg>

Output:

Contoh #3 – Melukis bulatan dalam SVG dengan garis besar dan pemfailan warna di dalamnya

Kod:

<svg width="400" height="400">
<circle cx="100" cy="100" r="90" stroke="red" stroke-width="1" fill="grey"></circle>
Sorry but this browser does not support inline SVG.
</svg>

Output:

Contoh #4 – Melukis garis lurus dengan SVG dalam HTML5

Kita boleh menggunakan tag untuk melukis garis lurus dalam SVG HTML5; warna, ketebalan garisan dan kedudukan boleh ditentukan.

Kod:

<svg width="400" height="400">
<line x1="5" y1="5" x2="300" y2="300" style="stroke:yellow; stroke-width:3"></line>
</svg>

Output:

Contoh #5 – Melukis gerhana melalui SVG dalam HTML5

Kita boleh menggunakan teg untuk melukis gerhana dalam HTML5 SVG; warna dan kedudukannya boleh ditakrifkan bersama die dengan jejarinya.

Kod:

<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3"></ellipse>
Sorry but this browser does not support inline SVG.</svg>

Output:

Contoh #6 – Membuat poligon dengan SVG dalam HTML5

Teg boleh digunakan dalam SVG untuk membuat poligon. Dalam teg, kami dikehendaki menyebut kedudukan setiap titik. Warna pengisian, ketebalan garis besar, dsb., boleh ditakrifkan dalam kod juga.

Kod:

<svg height="300" width="600">
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2"></polygon>
Sorry but this browser does not support inline SVG. </svg>

Output:

Contoh #7 – Membuat polyline dengan SVG dalam HTML5

Polyline digunakan untuk melukis bentuk yang hanya akan terdiri daripada garis lurus. Perlu diingat bahawa talian ini mesti disambungkan juga. Berikut ialah contoh pelaksanaan polyline dalam HTML5.

Kod:

<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3"></polyline>
Sorry but this browser does not support inline SVG. </svg>

Output:

Contoh #8 – Melukis Teks dengan SVG dalam HTML5

Teks itu mungkin diperlukan untuk mana-mana SVG dalam banyak situasi, seperti melabelkan carta, dll. Nasib baik, terdapat tag dalam SVG yang boleh digunakan. Teks boleh ditetapkan pada mana-mana kedudukan dalam SVG, dan anda boleh menyesuaikan warna serta butiran lain juga.

Kod:

<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>

Output:

Contoh #9 – Melukis Bintang dengan SVG dalam HTML5

Sekarang kita selesai dengan asas-asasnya, mari buat bintang yang akan dibuat dengan bantuan SVG.

Kod:

<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;"></polygon>
Sorry but this browser does not support inline SVG. </svg>

Output:

Contoh #10 – Menggunakan Gradien Linear dalam SVG

Anda boleh menggunakan Gradien linear dan jejari dalam Kanvas HTML banyak baris SVG. Kecerunan perlu bersarang dalam tag. Teg ini kemudiannya ditandakan dalam teg SVG untuk menandakan penggunaannya. Mari kita lihat contoh yang menggunakan Gradien dalam gerhana.

Kod:

<svg height="300" width="400">
<defs>
<lineargradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
</lineargradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)"></ellipse>
Sorry but this browser does not support inline SVG. </svg>

Output:

Kesimpulan

Dalam kes tapak di mana rajah dan carta akan digunakan, SVG ialah penyelamat. Kebanyakan penyemak imbas web moden menyokong SVG, juga dan selain daripada berskala. Satu lagi faedah menggunakan SVG ialah saiz failnya. Kerana ia hanyalah sedikit kod, SVG boleh mempunyai jejak yang sangat kecil dalam memori dan lebar jalur yang digunakan berbanding dengan Imej tradisional.

Atas ialah kandungan terperinci HTML SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!