Gambar diagram di browser html svg. Apa itu SVG: pro dan kontra penggunaan. Apa itu SVG

Grafik vektor banyak digunakan di media cetak. Dalam sebuah website, kita juga bisa menambahkan grafik vektor SVG (Grafik Vektor yang Dapat Diskalakan). Mengacu pada spesifikasi resmi di W3.org, SVG dideskripsikan sebagai bahasa untuk mendeskripsikan grafis 2D dalam XML. SVG memungkinkan Anda membuat bentuk grafik vektor (misalnya, jalur yang terdiri dari garis lurus dan kurva), gambar, dan teks.

Manfaat SVG

SVG menawarkan beberapa keunggulan dibandingkan grafik raster, berikut beberapa di antaranya:

Skalabilitas

Gambar raster terdiri dari piksel dan kehilangan kualitasnya saat diskalakan, sementara grafik vektor mempertahankan rasio aspeknya terlepas dari skalanya.

Akselerasi permintaan HTTP

File SVG dapat disematkan langsung ke dalam dokumen HTML menggunakan tag svg, sehingga browser tidak perlu membuat permintaan. Ini menghasilkan kinerja yang lebih baik dan lebih sedikit stres di situs.

Gaya dan skrip

Menyematkan tag svg langsung di dokumen HTML juga memungkinkan kita mengatur gaya grafis dengan mudah menggunakan . Kita dapat mengubah properti objek seperti warna latar belakang, transparansi batas, dll. Selain itu, kita juga bisa memanipulasi grafik dengan .

Gambar dapat dianimasikan dan dapat diedit

Objek SVG dapat dianimasikan dengan menggunakan animasi elemen dengan css atau JavaScript (JQuery). Objek SVG dapat diedit dengan editor teks atau editor grafik vektor seperti Inkscape atau Adobe Illustrator.

Ukuran file lebih kecil

SVG memiliki ukuran file yang lebih kecil dibandingkan bitmap.

Membuat Bentuk Sederhana dengan SVG

Sesuai dengan spesifikasinya, kita dapat membuat beberapa bentuk dasar seperti persegi panjang, lingkaran, garis, elips, poligaris, dan poligon menggunakan SVG dan agar browser menampilkan grafik SVG, semua elemen grafik ini harus dimasukkan ke dalam tag menandai. Mari kita lihat contoh-contoh di bawah ini:

Garis

Ke menarik garis di SVG Anda dapat menggunakan elemen tersebut . Elemen ini digunakan untuk menggambar satu garis, sehingga hanya terdiri dari dua titik, Awal Dan akhir.

< /svg>

Seperti yang Anda lihat di atas, titik asal garis dinyatakan dengan dua atribut pertama x1 dan x2 , dan koordinat titik akhir garis dinyatakan dengan y1 dan y2 .

Ada juga dua atribut lainnya, stroke dan stroke-width , yang digunakan untuk menentukan warna dan lebar perbatasan. Alternatifnya, kita juga bisa mendefinisikan atribut ini dalam gaya sebaris:

Gaya="lebar-garis:1; garis:rgb(0,0,0);"

dia akhirnya hanya melakukan hal yang sama.

garis putus-putus

Unsur ini mirip dengan , tetapi dengan bantuan Elemen kita bisa menggambar beberapa garis, bukan satu. Ini contohnya:

"0,0 50,0 150,100 250,100 300,150" isi="rgb(249.249.249)" lebar goresan ="1" stroke="rgb(0,0,0)" /> < /svg>

Persegi panjang

Menggambar persegi panjang juga mudah dengan ini elemen. Kita hanya perlu menentukan lebar dan tinggi, seperti ini:

< /svg>

Lingkaran

Kita juga bisa menggambar lingkaran dengan elemen. Pada contoh berikut, kita akan membuat lingkaran dengan radius 100 yang didefinisikan menggunakan atribut r:

< /svg>

Dalam dua atribut pertama, cx dan cy menentukan koordinat pusat lingkaran. Dalam contoh di atas, kami telah membuat 102 untuk koordinat x dan y, jika atribut ini tidak ditentukan, 0 akan diperlakukan sebagai nilai default.

Elips

Kita bisa menggambar elips dengan tag . Prinsip pembuatannya sama dengan lingkaran, tetapi kali ini kita dapat mengontrol garis dengan radius x dan radius y, serta atribut rx dan ry;

< /svg>

Poligon

Menggunakan elemen Kita bisa membuat bentuk multi sisi seperti segitiga, segi enam bahkan persegi panjang. Ini contohnya:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" isi="rgb(234.234.234)" lebar goresan ="1" stroke="rgb(0,0,0)" /> < /svg>

Menggunakan editor grafik vektor

Seperti yang Anda lihat, menggunakan objek SVG sederhana dalam dokumen HTML cukup mudah. Namun, karena objek menjadi lebih kompleks, metode ini tidak lagi ideal.

Untungnya, seperti yang kami sebutkan di atas, kami dapat menggunakan editor grafik vektor seperti Adobe Ilustrator atau inkscape .

Jika Anda menggunakan Inkscape, Anda dapat menyimpan file vektor Anda dalam format SVG dan kemudian membukanya di editor kode teks. Salin semua kode dan rekatkan ke dalam dokumen HTML Anda.

Anda dapat menyematkan file .svg menggunakan tag embed , iframe dan objek, misalnya;

Hasil akhirnya akan sama.

*Dalam contoh ini, kami menggunakan gambar

Hari ini kita akan berbicara tentang SVG, format apa itu, dengan apa dimakan dan apakah layak digunakan. Meskipun formatnya tidak terlalu baru, ia mendapatkan popularitasnya berkat pengenalannya. Semua versi browser terbaru telah menerima dukungan untuk format ini.

Kenapa dia begitu populer? Dan apa sebenarnya yang membuatnya berbeda dari yang lain? Hari ini kami akan menjawab pertanyaan-pertanyaan ini dan juga memberi tahu Anda apa yang perlu Anda ketahui untuk mulai bekerja dengan jenis file ini.

Apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphics, format berbasis vektor untuk pengembang web. Jenis format ini menjadi sangat populer karena gambarnya dapat ditampilkan dengan resolusi tinggi tanpa kehilangan kualitas, karena SVG adalah format vektor.

Dorongan untuk pengembangan bahasa markup ini pertama kali diberikan oleh World Wide Web Consortium, yang lebih dikenal pada tahun 1999 sebagai W3C. W3C memberikan konsep SVG - markup bahasa untuk membuat antarmuka grafis dan gambar dua dimensi.

Gunakan dalam praktek

Apa yang membuat SVG begitu populer, dan mengapa semakin banyak desainer yang mulai menggunakannya? Semuanya sangat sederhana, berfungsi sebagaimana mestinya.

SVG ringan dibandingkan dengan format lain. Format ini memiliki kemungkinan yang luar biasa. Bendera, simbol, elemen antarmuka. Dan ini hanyalah daftar kecil bagaimana itu bisa digunakan. Keuntungan terbesar menggunakannya adalah format vektor, artinya, dapat digunakan pada tampilan apa pun - berapa pun resolusinya, itu akan ditampilkan sama di mana-mana.

File SVG cukup mudah dikelola, karena disimpan sebagai gambar statis. Anda dapat menambahkan beberapa interaktivitas ke situs Anda dengan membuat animasi yang sangat sederhana namun indah dengan SVG.

Beberapa contoh di mana itu dapat digunakan:

Logo
gambar latar belakang
Gunakan sebagai tombol
Kartu-kartu
Diagram atau gambar

Sebagai aturan, SVG paling sering digunakan untuk membuat situs web responsif, animasi, dan efek dinamis lainnya.

Pro menggunakan SVG

Jadi mengapa kita harus meninggalkan JPG atau GIF biasa demi SVG? Ada banyak alasan mengapa Anda harus tetap menggunakannya dalam proyek Anda.

SVG adalah format vektor, oleh karena itu harus digunakan untuk situs responsif di mana ukuran gambar bergantung pada resolusi tampilan pengguna, dan SVG memenuhi semua persyaratan dengan sempurna.
Gambar SVG menggunakan XML untuk menentukan propertinya, dan dengan demikian, ia memiliki kemampuan untuk menjadi lebih terkompresi.
Gambar SVG sangat mudah dikelola, dan ini membuka lebih banyak kemungkinan bagi desainer untuk mengubah warna, menambahkan bayangan, filter, buram, dan banyak lagi efek lainnya.
SVG cukup mudah dimengerti.
SVG bekerja dengan standar web terbuka
Anda dapat menggunakan editor kode teks biasa untuk membuat SVG. Ini memberi Anda kebebasan dalam bertindak, semuanya tergantung pada kebutuhan Anda dan tingkat keahlian di bidang ini.

Kontra menggunakan SVG

Anda mungkin kewalahan dengan banyaknya hal baik yang dimiliki SVG. Dan mungkin mereka mengira dia tidak punya minus. Tapi tidak, pasti ada pasangan, dan ini beberapa di antaranya:

Tidak ada dukungan untuk browser lama seperti Explorer 8 dan yang lebih lama.
SVG tidak dapat digunakan dalam foto karena merupakan format vektor dan digunakan untuk membuat berbagai bentuk dan garis.

Apa berikutnya?

Masa depan SVG baru saja dimulai. Sebagai format gambar yang diterima (dan standar) untuk seluler, SVG hanya akan terus mendapatkan momentum.

File SVG adalah file grafik vektor yang dapat diskalakan. Lebih tepatnya, ini adalah bahasa untuk mendeskripsikan grafik dua dimensi. Bahasa markup XML adalah dasarnya.
Format ini memiliki sejumlah keunggulan: sebagai gambar vektor, gambar SVG mempertahankan kualitasnya tidak peduli bagaimana skala atau ukurannya diubah. Gambar SVG mendukung interaktivitas dan animasi. SVG adalah standar W3C, artinya memiliki dukungan yang baik dan berkualitas tinggi. Anda dapat membuat file SVG tidak hanya di editor grafis, tetapi juga di editor teks apa pun.
Gambar SVG berbasis XML dapat dicari, diindeks, dan dapat dibuat skrip dan dikompresi.

Sebelum beralih ke menggambar tanpa menggambar, mari kita lihat struktur file svg kosong, cukup untuk ditampilkan di program apa pun.

1.
2.
3.
4.
5.

Untuk kenyamanan, garis diberi nomor. Baris pertama berisi deklarasi dokumen XML standar.
Baris kedua merupakan indikasi skema DTD dokumen. Baris ketiga mengatur ukuran dokumen yang dibuat menjadi 600 kali 600 piksel. Atribut tag pertama
Jika Anda membuka gambar yang dibuat di inkscape di notepad, Anda dapat menemukan tag tambahan yang dibuat oleh inkscape secara default. Jika Anda memilih svg sederhana saat menyimpan gambar, maka struktur file akan sedikit berbeda.
Mari lanjutkan langsung ke pembuatan bentuk utama. Kami mempersenjatai diri dengan notepad dan meneruskan. Kami memeriksa apa yang kami lakukan di inkscape, jadi kami tetap menjalankannya.

Lingkaran.

Untuk membuat lingkaran di file svg kosong kita, tambahkan baris
Atributnya adalah koordinat pusat lingkaran (cx dan cy) dan jari-jarinya (r). Dalam hal ini, asal koordinat terletak di sudut kiri atas lembar kerja. File svg lengkap:

Sebuah lingkaran akan dibuat tepat di tengah dokumen, dengan radius 100 piksel. Karena tidak ada indikasi tentang warna isian, guratan, lapisan, dan efek lainnya, lingkaran digambar tanpa guratan dan diisi dengan warna hitam, seperti yang kita lihat saat membuka dokumen di inkscape. Perhatikan bahwa tidak akan ada lapisan dalam dokumen juga.

Penunjukan atribut cx, cy Dan R adalah standar. Mari atur stroke dan isi lingkaran kita, dan juga atur bobot stroke menjadi 6 px.

isi = "hijau" stroke = "kuning" stroke-width = "6"/>

Fill diatur ke hijau dan stroke berwarna kuning.

Menariknya, jika Anda membuat layer di dokumen ini, Anda dapat melihat bahwa gambar lingkaran tidak akan ditempatkan di layer yang dibuat, tetapi di suatu tempat di sana? Atribut yang relevan disorot dengan warna merah. Jika perlu membuat lingkaran tanpa isian atau goresan, atur nilai atribut yang sesuai menjadi tidak ada

stroke = "tidak ada"

Untuk mengubah transparansi isian, tambahkan atribut kegelapan, Misalnya opasitas = "0,5" mengurangi transparansi isian sebanyak 2 kali, dan untuk mengubah transparansi goresan, tambahkan atribut stroke-opacity, Misalnya stroke-opacity = "0,5" mengurangi opacity stroke sebanyak 2 kali.

Persegi panjang, kotak.

Persegi panjang terlihat seperti ini

Atribut persegi panjang (persegi) lurus tentukan koordinat sudut kiri atas, serta lebar dan tinggi persegi panjang. Pengaturan isi dan goresan terlihat sama.

Nah, di lingkaran terakhir dengan persegi

Untuk mengubah transparansi, kami menggunakan pendekatan yang sudah dikenal - tambahkan atributnya kegelapan untuk mengisi dan atribut stroke-opacity untuk stroke.

Bersambung.

Posting ini adalah yang pertama dari serangkaian artikel tentang SVG (Scalable Vector Graphic) yang mencakup dasar-dasar grafik vektor di situs.

Grafik vektor banyak digunakan dalam industri percetakan. Untuk website ada SVG yang menurut spesifikasi resmi di w3.org adalah bahasa untuk mendeskripsikan grafik dua dimensi dalam XML. SVG mencakup tiga jenis objek: bentuk, gambar, dan teks. SVG sudah ada sejak 1999 dan masuk dalam rekomendasi W3C sejak 16 Agustus 2011. SVG sangat diremehkan oleh pengembang web, meskipun memiliki beberapa keunggulan penting.

Manfaat SVG

Penskalaan: Tidak seperti grafik raster, SVG tidak kehilangan kualitas saat diskalakan, sehingga nyaman digunakan untuk pengembangan retina.
Mengurangi Permintaan HTTP: Saat menggunakan SVG, jumlah panggilan ke server berkurang, dan kecepatan pemuatan situs meningkat.
Penataan gaya dan skrip: Dengan menggunakan CSS, Anda dapat mengubah pengaturan grafik di situs, seperti latar belakang, transparansi, atau batas.
Animasi dan Pengeditan: Menggunakan javascript, Anda dapat menganimasikan SVG, serta mengedit dalam editor teks atau grafik (InkScape atau Adobe Illustrator).
Ukuran kecil: Objek SVG memiliki berat yang jauh lebih kecil daripada bitmap.

Bentuk SVG Dasar

Menurut spesifikasi resmi, Anda dapat menggambar objek sederhana menggunakan SVG: persegi panjang, lingkaran, garis, elips, polyline, atau poligon menggunakan tag svg.

baris sederhana dengan tag garis dengan hanya dua parameter - titik awal (x1 dan x2) dan titik akhir (y1 dan y2):

Anda juga dapat menambahkan atribut atau gaya stroke dan lebar stroke untuk mengatur warna dan lebar:

Gaya="lebar-garis:1; garis:rgb(0,0,0);"