Cara mencipta imej SVG yang boleh diskala untuk web

Jika anda bekerja dengan imej untuk web, lambat laun anda perlu mencipta imej SVG yang boleh diskala. Ia perlu kelihatan sempurna pada mana-mana skrin, dimuatkan dengan cepat dan tidak memberi kesan negatif kepada prestasi laman web anda. PNG atau JPG biasa berfungsi dalam banyak situasi, tetapi apabila logo anda kelihatan kabur pada TV 4K atau ikon anda hilang ketajaman pada peranti mudah alih baharu, ketika itulah anda menyedari bahawa anda benar-benar memerlukan grafik vektor.

SVG (Grafik Vektor Boleh Skala) telah menjadi format utama untuk logo, ikon, ilustrasi, infografik dan animasi ringan.Ini adalah teks XML yang ditafsirkan dan dipaparkan oleh pelayar dalam masa nyata, supaya ia boleh diskalakan tanpa kehilangan kualiti, diubah suai dengan CSS atau JavaScript dan dioptimumkan untuk SEO dan kebolehcapaian. Mari kita lihat dengan jelas dan ringkas cara format berfungsi, cara menciptanya dari awal atau daripada JPG/PNG, cara mengintegrasikannya ke dalam laman web anda dan cara memanfaatkannya sepenuhnya.

Apakah fail SVG dan mengapa ia boleh diskala?

SVG bermaksud Grafik Vektor Boleh Diskalakan, yang bermaksud grafik vektor yang boleh diskalakan tanpa kehilangan definisi.Tidak seperti JPG atau PNG, yang menyimpan maklumat untuk setiap piksel, SVG menyimpan arahan lukisan—garisan, lengkung, warna dan kedudukan—dalam bentuk kod XML. Pelayar membaca arahan ini dan "melukis semula" imej pada resolusi yang diperlukan oleh peranti.

Cara kerja ini memastikan fail SVG yang sama kelihatan sama tajam pada telefon bimbit, monitor 4K atau papan iklan.Tiada piksel untuk diregangkan atau diinterpolasi; apa yang diubah saiznya adalah prinsip matematik yang menentukan bentuknya. Tambahan pula, memandangkan ia teks, fail tersebut boleh dibuka dan diedit dengan mana-mana editor kod, diautomasikan, dimampatkan dan juga dimanipulasi menggunakan JavaScript.

SVG tidak bergantung pada resolusi, sangat ringan untuk grafik ringkas dan serasi dengan semua pelayar moden.Chrome, Firefox, Safari, Edge dan Opera telah menyokong format ini secara asli selama bertahun-tahun. Malah Internet Explorer 9 dan versi yang lebih baharu menerima SVG, walaupun dengan beberapa batasan pada ciri yang sangat canggih.

Walau bagaimanapun, SVG bukanlah penyelesaian terbaik untuk semua jenis imej.Apabila berurusan dengan gambar yang kompleks, dengan berjuta-juta warna dan banyak perincian, JPG yang dimampatkan dengan baik biasanya lebih cekap. Cuba untuk menjadikan foto lengkap sebagai vektor biasanya menghasilkan fail SVG gergasi, sukar untuk dioptimumkan dan tidak praktikal untuk kegunaan dunia sebenar.

Raster vs vektor: perbezaan antara SVG, JPG dan PNG

Untuk memahami bila masa yang sesuai untuk mencipta imej SVG yang boleh diskala, anda perlu jelas tentang perbezaan antara imej raster dan vektor.JPG, PNG dan GIF ialah format bitmap: ia menyimpan grid piksel dengan warna tetap. SVG, EPS, AI atau PDF (dalam bahagian vektornya) huraikan bentuk matematik.

Dalam imej raster, jika anda membesarkan saiz terlalu banyak, piksel akan kelihatan dan kesan "tangga" yang tipikal muncul.Kehilangan kualiti itu tidak dapat dielakkan apabila anda cuba memaksa resolusi yang tidak dimiliki oleh imej asal. Sebaliknya, SVG boleh dibesarkan sebanyak yang anda mahukan kerana apa yang dibesarkan ialah formula yang melukis setiap baris.

JPG sesuai untuk foto kerana ia memampatkan variasi warna dengan sangat baik, dengan kos kehilangan beberapa kualiti.PNG, sebaliknya, mengekalkan kualiti (pemampatan tanpa kehilangan) dan menyokong ketelusan, menjadikannya sesuai untuk grafik dengan latar belakang lutsinar, tangkapan skrin atau elemen antara muka yang tidak perlu diskalakan terlalu banyak.

SVG menyerlah dalam ikon, logo, ilustrasi, gambar rajah, carta, infografik dan animasi ringkas.Untuk jenis kandungan ini, fail PNG cenderung lebih besar, kelihatan lebih teruk apabila dibesarkan, dan tidak boleh dimanipulasi secara fleksibel dengan CSS. Itulah sebabnya ekosistem web telah menerima pakai SVG untuk semua elemen antara muka moden.

Kegunaan biasa imej SVG yang boleh diskalakan

Dalam reka bentuk dan pembangunan web, SVG digunakan terutamanya untuk elemen yang perlu mengekalkan ketajaman maksimum pada mana-mana peranti.Bukan sesuatu yang luar biasa bagi sesebuah laman web untuk menggunakan berpuluh-puluh atau beratus-ratus SVG yang diedarkan merentasi menu, bahagian, butang, pengepala atau ilustrasi.

Ikon adalah salah satu contoh paling jelas di mana SVG mendominasi.Ikon media sosial, menu hamburger, penilaian bintang, ikon troli beli-belah… Kesemuanya mendapat manfaat daripada kebolehskalaan format. Anda boleh menggunakan ikon yang sama dalam saiz kecil pada menu mudah alih dan saiz besar pada halaman harga tanpa kehilangan sebarang perincian.

Logo korporat merupakan satu lagi kegunaan pentingMenyimpan logo anda sebagai SVG memastikan ia akan kelihatan sempurna pada favicon, menu, slider halaman utama dan sebarang bahan bercetak anda. Tambahan pula, satu fail sumber boleh digunakan semula untuk web, pembentangan, poster dan kad perniagaan tanpa perlu menciptanya semula setiap kali.

SVG juga biasa digunakan dalam infografik, grafik data dan ilustrasi tersuai.Oleh kerana kandungannya berasaskan vektor, garisan grafik kelihatan bersih, teksnya boleh dikekalkan jelas dan fail tersebut boleh disesuaikan dengan lancar pada tablet, telefon bimbit dan skrin besar.

Akhir sekali, SVG membolehkan anda mencipta animasi yang sangat ringan dan lancar.Anda boleh menganimasikan ikon yang berubah warna apabila anda mengarahkan tetikus ke atasnya, pemuat yang berputar tanpa henti, atau grafik yang bertindak balas terhadap penatalan atau interaksi pengguna menggunakan CSS, SMIL atau JavaScript.

Alat untuk mencipta imej SVG yang boleh diskalakan

Untuk menjana fail SVG, anda boleh bermula dari awal dalam editor vektor atau menukar imej sedia ada dalam format raster atau vektor.Pilihannya bergantung pada sama ada anda mahukan reka bentuk yang baharu sepenuhnya atau jika anda sudah mempunyai logo dalam format JPG/PNG yang ingin anda jadikan vektor.

Program yang paling biasa untuk mereka bentuk dan mengeksport SVG ialah Adobe Illustrator, Inkscape, CorelDRAW, Figma dan Sketch.Kesemuanya berfungsi dengan vektor sebagai asas dan membolehkan anda menyimpan dalam format SVG dengan pelbagai tahap kawalan ke atas saiz, fon dan jenis eksport. Jika anda mencari lebih banyak pilihan, lihat senarai program penciptaan imej vektor.

Adobe Illustrator ialah standard profesional di banyak agensi dan studio.Ia membolehkan anda melukis dengan alat Pen, mengatur reka bentuk dalam lapisan, menggunakan kesan lanjutan, tipografi berkualiti tinggi dan kemudian mengeksport ke SVG, melaraskan pilihan seperti membenamkan atau memautkan fon, gaya CSS dalaman atau luaran dan tahap keserasian.

Inkscape ialah alternatif percuma dan sumber terbuka yang merangkumi hampir semua keperluan pereka biasa.Ia mempunyai alat untuk bentuk, nod, teks, kecerunan, penapis dan juga eksport langsung ke SVG, yang biasanya juga menjana kod agak bersih.

Figma dan Sketch, yang sangat popular dalam reka bentuk antara muka, juga membenarkan pengeksportan ikon dan komponen sebagai SVG.Ia sesuai jika anda sudah mengusahakan UI anda dalam alat ini kerana anda boleh membawa ikon anda terus ke kod tanpa langkah perantaraan.

Tukar imej JPG atau PNG kepada SVG

Selalunya anda tidak bermula dari awal, tetapi sudah mempunyai logo atau lukisan dalam format JPG, PNG atau PDF dan memerlukan SVG yang boleh diskala.Dalam kes ini, terdapat dua laluan: melakar vektor secara automatik dengan alat laluan atau melukis semula grafik secara manual dengan alat Pen.

Alat penjejakan automatik menukar piksel kepada bentuk vektor dengan cepat, tetapi dengan hasil yang tidak konsisten.Untuk logo ringkas, dalam satu warna atau dengan sedikit perincian, ia berfungsi dengan baik dan menjimatkan masa anda. Walau bagaimanapun, untuk grafik yang kompleks, ia menghasilkan beribu-ribu nod dan fail SVG yang sangat besar dan sukar untuk diedit. Jika anda perlu mendalami kaedah manual, semak teknik penjejakan dan vektorisasi dalam Illustrator.

Sesetengah platform khusus menawarkan perkhidmatan vektorisasi manualDengan perkhidmatan ini, anda memuat naik logo anda dalam format JPG, PNG atau PDF, dan pereka bentuk melukisnya semula dengan tangan dalam Illustrator menggunakan fon yang betul, memberikan fail EPS/AI/SVG yang bersih dan sedia untuk dicetak atau di web. Ia merupakan pilihan yang paling boleh dipercayai untuk logo jenama yang perlu kelihatan sempurna.

Jika anda menukar daripada format vektor lain seperti EPS atau AI, penukar SVG biasanya menyimpan hampir semua maklumat.Dalam kes ini, warna, bentuk dan struktur lapisan dikekalkan dengan agak tepat, selagi anda tidak menggunakan kesan yang sangat spesifik daripada program tertentu.

Apabila sumbernya ialah foto atau imej raster yang sangat kompleks, vektorisasi automatik jarang sekali menawarkan hasil yang berguna.Dalam senario ini, perkara yang paling munasabah untuk dilakukan ialah menyimpan foto dalam format JPG atau WebP dan menyimpan SVG untuk ikon, bingkai, teks atau elemen grafik bertindih.

Cara membuat fail SVG langkah demi langkah

Jika anda ingin mereka bentuk imej SVG berskala anda sendiri dari awal, aliran kerja asasnya agak serupa dalam hampir semua editor vektor.Berikut ialah ringkasan umum supaya anda boleh menggunakannya dalam Inkscape, Illustrator atau alat yang serupa.

Langkah pertama ialah mencipta kanvas atau ruang kerja dengan dimensi yang munasabahWalaupun SVG akan boleh diskala kemudian, adalah dinasihatkan untuk menggunakan "saiz manusia" (contohnya, 500×500 px untuk ikon atau 1200×600 px untuk pengepala), kerana itu menjadikan reka bentuk lebih selesa dan membantu mengekalkan perkadaran.

Seterusnya datang fasa lukisanGunakan alat Pen atau Bezier untuk melukis garisan luar, garisan dan lengkung, serta alat bentuk asas (segi empat tepat, elips, poligon) untuk membina reka bentuk anda. Setiap bentuk akan direkodkan sebagai laluan atau set laluan dalam XML SVG.

Pada laluan ini, anda menggunakan warna isian dan goresan, ketebalan garisan, sudut bulat, kecerunan atau corakSemua atribut ini kemudiannya boleh diterjemahkan ke dalam CSS, jadi adalah dinasihatkan untuk tidak menggunakan kesan pelik yang tidak diterjemahkan dengan baik kepada pelayar.

Setelah reka bentuk anda siap, laraskan papan seni mengikut kandungan.Dalam kebanyakan program, terdapat pilihan untuk menyesuaikan kanvas mengikut had lukisan dan mengelakkan margin kosong; ini membantu memastikan SVG tidak mempunyai ruang putih yang tidak perlu di sekelilingnya.

Akhir sekali, eksport atau simpan sebagai SVGKotak dialog eksport biasanya merangkumi pilihan untuk memudahkan laluan, memasukkan gaya sebagai atribut sebaris atau sebagai CSS, membenamkan imej atau fon, dsb. Untuk kegunaan web, SVG yang paling bersih dan paling ringan, tanpa metadata yang berlebihan, secara amnya adalah wajar.

Ubah saiz dan skala SVG tanpa kehilangan kualiti

Perkara yang hebat tentang format ini ialah anda boleh mengubah saiz SVG tanpa ia menjadi berpiksel, tetapi itu tidak bermakna anda tidak perlu memberi perhatian kepada bagaimana ia diskalakan.Atribut utama dalam proses ini ialah kotak pandangan, yang mentakrifkan sistem koordinat dalaman graf.

Dalam fail SVG itu sendiri, anda akan melihat sesuatu seperti viewBox="0 0 100 100"Ini menunjukkan bahawa keseluruhan lukisan direka bentuk dalam unit segi empat sama 100x100. Jika anda kemudian memberitahu pelayar dalam HTML bahawa SVG hendaklah selebar 200px, pelayar hanya akan mendarabkan unit tersebut agar sesuai dengan kandungan.

Untuk menjadikan SVG benar-benar responsif, amalan biasa adalah untuk mengalih keluar atribut lebar dan tinggi daripada elemen tersebut. dan hanya tinggalkan viewBox. Kemudian, dalam CSS, kelakuannya dikawal dengan sesuatu yang semudah:

svg { paparan: blok-sebaris; lebar-maksimum: 100%; ketinggian: diri; }

Jika anda perlu mengubah saiz banyak SVG secara pukal dan tidak mahu menyentuh kod, terdapat alat dalam talian yang bertindak sebagai alat "ubah saiz" untuk SVG.Utiliti ini membolehkan anda menentukan saiz baharu dalam peratusan atau unit, menggunakan transformasi dan memuat turun versi berskala baharu tanpa perlu memasang sebarang perisian.

Cara memasukkan SVG ke dalam halaman web

Sebaik sahaja anda mempunyai imej SVG yang boleh diskala, langkah seterusnya ialah membawanya ke dalam pelayar.Terdapat beberapa cara untuk melakukan ini, dan setiap satunya memberi anda tahap kawalan yang berbeza terhadap gaya, kebolehcapaian dan prestasi.

Cara paling asas dan langsung adalah dengan menggunakan label menunjuk ke fail SVG luaranContohnya: Ia adalah mekanisme yang sama seperti JPG, hanya pelayar sahaja yang tahu bahawa sumber tersebut berasaskan vektor.

Jika anda mahukan lebih kawalan, anda boleh membenamkan kod SVG itu sendiri dalam HTML menggunakan tagDalam kes itu, anda menyalin kandungan fail dan menampalnya ke dalam kod halaman anda. Ini membolehkan anda menukar warna dengan CSS, menambah kelas, memanipulasi bahagian tertentu dengan JavaScript dan meningkatkan kebolehcapaian.

Satu lagi pilihan, yang kurang digunakan hari ini tetapi masih sah, adalah dengan menggunakan sama ada untuk memuatkan SVG sebagai sumber luaran terbenamIa mempunyai beberapa batasan dari segi gaya dan kebolehcapaian, jadi dalam praktiknya hampir semua orang lebih suka atau SVG sebaris.

Sistem pengurusan kandungan seperti WordPress tidak membenarkan muat naik SVG secara lalai atas sebab keselamatan.Mudah untuk mendayakannya dengan memasang pemalam seperti Safe SVG atau SVG Support, yang membersihkan fail untuk mengelakkannya daripada mengandungi skrip berniat jahat dan membolehkan anda menggunakannya daripada pustaka media seperti mana-mana imej lain.

Menggayakan dan menganimasikan SVG dengan CSS dan kod

Salah satu kelebihan paling hebat mempunyai imej SVG yang boleh diskala ialah ia boleh dianggap seolah-olah ia adalah sebahagian daripada DOM halaman itu sendiri.Ini bermakna kita boleh menggunakan gaya dengan CSS dan mencipta animasi dengan CSS, SMIL atau JavaScript tanpa menyentuh fail asas.

Jika anda membenamkan SVG dalam baris (tidak seperti (luaran), anda boleh menukar warna isian dan strok secara langsung dengan CSSContohnya: laluan svg { fill: red; stroke: blue; }. Ini membolehkan, sebagai contoh, menggunakan semula fail yang sama untuk memaparkan logo dalam satu warna dalam pengepala dan warna yang berbeza dalam pengaki.

Atribut isian menentukan warna kawasan dalaman bentuk, dan strok mengawal warna dan ketebalan garis luar.Anda juga boleh mengubah suai sifat seperti lebar-stroke, dasharray-stroke atau linecap-stroke untuk mencapai kesan lukisan tangan atau garisan putus-putus.

Untuk animasi mudah, CSS sudah lebih daripada mencukupi.Anda boleh menukar warna ikon apabila anda mengarahkan kursor ke atasnya, memutar, berdenyut atau menatal menggunakan transformasi dan peralihan standard.

Jika anda memerlukan sesuatu yang lebih terperinci, piawaian SVG itu sendiri merangkumi elemen seperti yang membenarkan atribut animasi dalam el tiempoContohnya, membuat bulatan bergerak dari sisi ke sisi, mengubah kedudukannya cx selama lima saat, dalam satu gelung, tanpa memerlukan skrip luaran.

Untuk animasi yang kompleks dan interaktif, JavaScript (atau pustaka tertentu) membolehkan anda menghubungkan SVG dengan peristiwa penggunaAnda boleh mengalihkan bahagian carta dengan mengklik, menyegerakkan animasi dengan menatal atau menukar penampilan berdasarkan data yang diterima halaman, membuka pintu kepada visualisasi data yang sangat kaya.

Sprite SVG dan pengoptimuman prestasi

Apabila laman web menggunakan berpuluh-puluh atau beratus-ratus ikon, memuatkan setiap SVG secara berasingan melibatkan banyak permintaan HTTP.Untuk mengurangkan bilangan tersebut dan mempercepatkan pemuatan, adalah sangat berguna untuk menggunakan sprite SVG atau strategi pengelompokan yang serupa.

Sprite SVG pada asasnya ialah fail besar yang mengandungi banyak ikon yang ditakrifkan dalam elemenKemudian, dalam setiap bahagian HTML anda di mana anda ingin memaparkan ikon, anda gunakan Dengan cara ini, pelayar memuat turun sprite hanya sekali dan menggunakan semula ikon secara dalaman.

Teknik ini mengurangkan bilangan permintaan ke pelayan dengan ketara.Ini mengurangkan latensi dan meningkatkan pengalaman pengguna, terutamanya pada sambungan mudah alih. Tambahan pula, anda masih mengekalkan keupayaan untuk menukar warna dan saiz menggunakan CSS.

Selain sprite, terdapat alat khusus untuk memampatkan dan mengoptimumkan SVG.Utiliti seperti SVGO atau versi webnya SVGOMG menganalisis kod, mengalih keluar metadata, ruang, atribut yang tidak perlu, titik berlebihan dalam laluan dan semua yang tidak menjejaskan hasil visual.

Banyak editor vektor juga menyertakan ciri penyederhanaan laluan terbina dalamMengurangkan bilangan nod dalam lengkung kompleks bukan sahaja mengurangkan saiz fail, tetapi juga memudahkan penyuntingan berikutnya dan menghalang pelayar daripada perlu mengira laluan yang terlalu rumit.

Pada halaman dengan banyak grafik di bawah lipatan, adalah idea yang baik untuk menggabungkan SVG dengan teknik pemuatan malas.Walaupun SVG biasanya ringan, tidak masuk akal untuk memuatkan semua ikon dan grafik sekaligus yang tidak akan dilihat oleh pengguna sehingga mereka menatal beberapa ratus piksel.

Keserasian, SEO dan kebolehcapaian dalam SVG

Dari segi keserasian, situasi semasa sangat mudah: semua pelayar moden menyokong SVG secara meluas.Chrome, Firefox, Safari, Edge dan Opera memaparkan grafik SVG dengan lancar pada desktop dan mudah alih, dan penembusan pelayar yang benar-benar lama sudah sangat rendah dalam kebanyakan projek.

Faktor pembezaan sebenar SVG berbanding JPG atau PNG ialah kandungannya berbentuk teks dan, oleh itu, boleh dibaca oleh enjin carian dan teknologi bantuan.Ini menjadikannya sekutu yang menarik untuk SEO dan kebolehcapaian, jika tag dan atribut yang sesuai digunakan.

Dalam elemen anda boleh sertakan dan <desc> untuk menerangkan grafNod-nod ini digunakan sebagai maklumat yang boleh diakses oleh pembaca skrin dan juga menyediakan konteks semantik kepada kandungan fail, yang memudahkan pengindeksan.

Atribut role="img" memberitahu teknologi bantuan bahawa SVG bertindak sebagai imej, dan aria-labelledby boleh memautkan SVG kepada kandungan dan <desc>. Dalam kes yang kompleks, masih dinasihatkan untuk mengiringi imej dengan teks alternatif dalam HTML atau menggunakan alt dalam <img> jika anda memasukkannya sebagai sumber luaran.

Dari perspektif prestasi carian, penggunaan SVG yang dioptimumkan dapat mengurangkan pemberat halaman keseluruhan.Kilobait yang lebih sedikit bermakna masa muat yang lebih rendah, yang mempengaruhi metrik seperti LCP atau FCP secara positif. Google Ia mengambil kira dalam Core Web Vitals.

Dalam projek yang masih terdapat pengguna dengan pelayar yang sangat lama, penyelesaian sandaran boleh dilaksanakan.Contohnya, menyediakan PNG yang setara menggunakan atau syarat tertentu. Walau bagaimanapun, dalam praktiknya, pembetulan ini semakin kurang diperlukan.

Amalan terbaik semasa mereka bentuk dan mengurus fail SVG

Mencipta imej SVG yang boleh diskala bukan sekadar "mengeksport ke SVG," ia juga melibatkan disiplin reka bentuk dan pengekodan tertentu.Jika anda berhati-hati dalam cara anda menamakan lapisan, memudahkan laluan dan menstrukturkan fail, ia akan menjadi lebih mudah untuk diselenggara dan lebih cekap dalam pengeluaran.

Adalah disyorkan untuk memastikan SVG kemas, dengan lekukan yang konsisten dan nama ID serta kelas yang bermakna.Contohnya, penggunaan id="cart-icon" adalah jauh lebih berguna daripada id="path123" apabila anda perlu menggunakan gaya tertentu daripada CSS atau mengubah suai elemen dengan JavaScript.

Meminimumkan elemen tersembunyi, lapisan berlebihan dan atribut pendua adalah kunci lain.Banyak fail yang dijana terus daripada program reka bentuk membawa maklumat yang tidak berguna di web dan boleh dibersihkan dengan selamat menggunakan SVGO atau yang serupa.

Apabila bekerja dengan banyak SVG dalam sesuatu projek, adalah idea yang baik untuk menyusunnya ke dalam folder logik dengan nama fail yang konsisten.Mempunyai /svg/icons/, /svg/logos/ dan /svg/illustrations/ akan menjimatkan masa anda semasa mencari sumber dan akan memudahkan proses pengoptimuman diautomasikan.

Secara visual, ingat bahawa SVG harus kelihatan baik pada skrin konvensional dan paparan retina berketumpatan tinggi.Bekerja dengan bentuk yang jelas, kontras yang sesuai dan teks yang tidak terlalu kecil adalah penting untuk memastikan kebolehbacaan pada semua jenis peranti.

Jika anda akan menggunakan fon dalam SVG, pertimbangkan sama ada anda ingin menukar teks kepada garis besar atau menyimpannya sebagai teks langsung.Menukarnya kepada lengkung memastikan ia akan kelihatan sama walaupun pengguna tidak memasang fon tersebut, tetapi ia kehilangan aksesibiliti dan keupayaan untuk mengeditnya; mengekalkannya sebagai teks melindungi semantik, sebagai pertukaran untuk bergantung pada fon yang tersedia.

SVG yang dibina dengan baik adalah ringan, mudah dibaca, mudah diakses dan mudah digunakan semula dalam konteks yang berbeza.Dengan menggabungkan amalan reka bentuk yang baik, alat pengoptimuman dan penyepaduan yang betul ke dalam HTML dan CSS, anda boleh memanfaatkan banyak perkara daripada format ikon, logo, grafik dan animasi ini, sekali gus meningkatkan kualiti visual laman web anda dan prestasi serta keupayaannya untuk menyesuaikan diri dengan mana-mana skrin.