Cara menggunakan html to css converter

Membangun website yang baik adalah memiliki perfomance cepat dan juga responsive design yang menarik. Menggunakan React JS sebagai framework JavaScript pada tahap development adalah pilihan yang baik.

Selain dapat bekerja lebih cepat namun juga menggunakan React JS bekerja dalam suatu tim besar akan memudahkan developer ketika adanya suatu error (bugs). Karena pada dasarnya website dibangun bedasarkan dari banyak component yang easy to maintain.

Di kelas online React JS gratis ini kita akan belajar bagaimana caranya install React JS, convert template HTML ke React JS Website Apps, dan masih banyak lainnya. Cocok sekali jika kamu sudah mempelajari HTML, CSS, dan JavaScript. Waktunya untuk upgrade skills. Kami tunggu di kelas ya!

SVG adalah singkatan dari Scalable Vector Graphics (Grafik Vektor Yang Ukurannya Bisa Diubah). Ini adalah jenis format gambar yang unik untuk grafik berbasis vektor yang ditulis menggunakan Extensible Markup Language (XML).

Dalam tutorial ini, saya akan menjelaskan mengapa kamu harus menggunakan gambar SVG dan bagaimana kamu bisa menggunakannya dalam CSS dan HTML.

Ada beberapa alasan kamu harus menggunakan gambar SVG, beberapa di antaranya yaitu:

• Gambar SVG tidak berkurang kualitasnya saat diperbesar atau diubah ukurannya.
• Mereka dapat dibuat dan diedit menggunakan IDE atau editor teks.
• Mereka mudah untuk diakses dan dianimasi.
• Mereka memiliki ukuran yang kecil dan dapat diubah ukurannya dengan mudah.
• Mereka dapat dicari, diindeks, disisipkan skrip, dan dikompres.

Sekarang, mari kita lihat bagaimana kamu bisa bekerja dengan gambar SVG.

Jika Anda ingin bermain dengan gambar SVG yang saya gunakan di tutorial ini, ikuti langkah-langkah (dan diagram) berikut untuk mengunduhnya.

• Pergi ke unDraw.
• Ubah warna latar belakang menjadi kuning.
• Dalam kotak pencarian, cari kata happy.

• Klik gambar yang bernama Happy news.
• Pada window yang muncul, klik tombol Download SVG to your projects.

Jika kamu sudah mengikuti langkah-langkah di atas dengan benar, gambar SVGnya seharusnya sudah berada di dalam komputermu.

Sekarang, buka gambar SVGnya menggunakan IDE kesukaanmu atau editor teks. Ubah namanya menjadi happy.svg atau nama apapun yang kamu inginkan.

Ada beberapa cara yang berbeda untuk menggunakan gambar SVG di CSS dan HTML. Kita akan melihat enam metode yang berbeda pada tutorial ini.

1. Cara menggunakan SVG sebagai <img>

Ini adalah metode yang paling sederhana untuk menambahkan gambar SVG ke halaman web. Untuk menggunakan metode ini, tambahkan elemen <img> ke dokumen HTMLmu dan referensikan gambarnya di dalam atribut src, seperti ini:

<img src = "happy.svg" alt="SVG Happyku"/>

Dengan asumsi kamu mengunduh gambar SVGnya dari unDraw dan menamakannya menjadi happy.svg, silakan lanjutkan dan tambahkan potongan kode di atas ke dalam dokumen HTMLmu.

Jika kamu sudah melakukan semua langkahnya dengan benar, halaman webmu harusnya terlihat seperti demo di bawah ini. 👀

Saat kamu menambahkan gambar SVG menggunakan tag <img> tanpa menetapkan ukurannya, ia berasumsi ukurannya sesuai dengan file SVG yang asli.

Contohnya, pada demo di atas, saya tidak mengubah ukuran gambar SVGnya, jadi ia menganggap ukurannya adalah ukuran aslinya (lebarnya 915.11162px dan tingginya 600.53015px).

Catatan: untuk mengubah ukuran aslinya, kamu harus menetapkan

body {
  background-image: url(happy.svg);
}

body {
  background-image: url(happy.svg);
}

body {
  background-image: url(happy.svg);
}

body {
  background-image: url(happy.svg);
}

Walaupun kita bisa mengubah ukuran gambar SVG yang ditambahkan melalui tag <img>, ada beberapa halangan jika Anda ingin membuat perubahan besar pada gambar SVGnya.

2. Cara menggunakan SVG sebagai body { background-image: url(happy.svg); } 5 CSS

Ini mirip dengan menambahkan SVG ke dokumen HTML menggunakan tag <img>. Akan tetapi, sekarang kita akan melakukannya dengan CSS alih-alih menggunakan HTML seperti yang kamu bisa lihat pada potongan kode di bawah ini.

body {
  background-image: url(happy.svg);
}

Saat kamu menggunakan SVG sebagai latar belakang CSS, metode ini memiliki halangan yang sama seperti <img>. Akan tetapi, ia tetap mengizinkan sedikit lebih banyak perubahan.

Cek demo di bawah ini dan jangan sungkan untuk membuat modifikasi menggunakan CSS.

3. Cara menggunakan gambar SVG dalam baris

Gambar SVG dapat ditulis secara langsung menggunakan tag

body {
  background-image: url(happy.svg);
}

Untuk melakukan ini, buka gambar SVG di VS Code atau IDE yang kamu inginkan, salin ke elemen

body {
  background-image: url(happy.svg);
}

<body>
 // Tempelkan kode SVG di sini.
</body>

Jika semuanya sudah benar, halaman web kamu seharusnya tampak persis seperti demo di bawah ini.

Saat kamu menggunakan SVG dalam baris pada dokumen HTML, waktu memuatnya akan berkurang karena ia bertindak sebagai permintaan HTTP.

Menggunakan metode ini mengizinkanmu untuk melakukan lebih banyak perubahan dibandingkan dengan menggunakan metode <img> atau

body {
  background-image: url(happy.svg);
}

4. Cara menggunakan SVG sebagai <body> // Tempelkan kode SVG di sini. </body> 2

Kamu juga bisa menggunakan elemen

<body>
 // Tempelkan kode SVG di sini.
</body>

<object data="happy.svg" width="300" height="300"> </object>

Kamu menggunakan atribut

<body>
 // Tempelkan kode SVG di sini.
</body>

Kamu menggunakan

body {
  background-image: url(happy.svg);
}

body {
  background-image: url(happy.svg);
}

Lagi, di bawah ini ada demo untuk kamu coba-coba. 😃

<body>
 // Tempelkan kode SVG di sini.
</body>

5. Menggunakan SVG sebagai <body> // Tempelkan kode SVG di sini. </body> 8

Meskipun ini tidak disarankan, kamu juga bisa menambahkan gambar SVG menggunakan

<body>
 // Tempelkan kode SVG di sini.
</body>

Ingat, bahwa

<body>
 // Tempelkan kode SVG di sini.
</body>

Menggunakan

<body>
 // Tempelkan kode SVG di sini.
</body>

6. Cara menggunakan SVG sebagai <embed>

Elemen

<object data="happy.svg" width="300" height="300"> </object>

<object data="happy.svg" width="300" height="300"> </object>

Ingatlah, metode ini memiliki keterbatasannya juga. Menurut MDN, kebanyakan browser modern tidak menyetujui dan mencabut dukungan mereka untuk plug-in browser. Ini berarti menggunakan

<object data="happy.svg" width="300" height="300"> </object>

Di bawah ini ada demo menggunakan elemen

<object data="happy.svg" width="300" height="300"> </object>

Conclusion

Saya harap kamu dapat belajar tentang berbagai cara yang berbeda untuk menggunakan gambar SVG di CSS dan HTML. Mudah-mudahan tutorial ini akan membimbing kamu untuk bisa memilih metode yang tepat saat menambahkan gambar SVG ke suatu situs web.

Jika kamu memiliki pertanyaan, kamu bisa mengirimkan pesan di Twitter, dan saya akan dengan senang menjawab semuanya.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Author: Edidiong Asikpo (English)

I am a software developer who is passionate about technical writing, contributing to open source organizations and building developer communities.

Translator: Kevin Matthew

Read more posts.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started