Memasnga custom logo SVG yang sesuai di Flat UI Pro
Untuk mendapatkan tampilan yang menarik maka warna font SVG juga harus di sesuaikan berikut adalah cara membuat warna SVG yang sesuai.
SVG (Scalable Vector Graphics) adalah format gambar berbasis vektor yang sering digunakan dalam desain web karena fleksibilitas dan skalabilitasnya. Salah satu keunggulan SVG adalah kemampuannya untuk dimodifikasi langsung melalui kode, termasuk dalam menentukan warna elemen. Pemilihan warna yang sesuai dapat meningkatkan estetika dan keterbacaan tampilan web. Berikut adalah panduan untuk mengatur warna SVG agar sesuai dengan kebutuhan desain.
Mengenal Struktur Dasar SVG
SVG terdiri dari elemen-elemen seperti <path>, <circle>, <rect>, dan lainnya yang menggambarkan bentuk grafis. Contoh berikut adalah struktur dasar SVG yang digunakan untuk membuat ikon:
<svg id="whatsapp" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fm" d="M8.002 0h-.004C3.587 0 0 3.588 0 8a7.94 7.94 0 0 0 1.523 4.689l-.997 2.972 3.075-.983A7.93 7.93 0 0 0 8.002 16C12.413 16 16 12.411 16 8s-3.587-8-7.998-8z"></path>
<path class="ft" d="M12.657 11.297c-.193.545-.959.997-1.57 1.129-.418.089-.964.16-2.802-.602-2.351-.974-3.865-3.363-3.983-3.518-.113-.155-.95-1.265-.95-2.413s.583-1.707.818-1.947c.193-.197.512-.287.818-.287.099 0 .188.005.268.009.235.01.353.024.508.395.193.465.663 1.613.719 1.731.057.118.114.278.034.433-.075.16-.141.231-.259.367-.118.136-.23.24-.348.386-.108.127-.23.263-.094.498.136.23.606.997 1.298 1.613.893.795 1.617 1.049 1.876 1.157.193.08.423.061.564-.089.179-.193.4-.513.625-.828.16-.226.362-.254.574-.174.216.075 1.359.64 1.594.757.235.118.39.174.447.273.056.099.056.564-.137 1.11z"></path>
</svg>Perhatikan element <path> yang ada pada SVG tersebut, pada contoh di atas, terdapat dua elemen <path> dengan kelas fm dan ft. Elemen-elemen ini merepresentasikan bagian dari ikon yang berbeda, beda keduanya hanya di warna gelap dan terang saja, gunakan fm jika anda menginginkan warna terang transparant (warna muda), gunakan ft untuk warna gelap normal (warna tua).
Sekian informasinya, semoga bisa di mengerti dan di implementasikan.