SVG Viewer - Alat untuk melihat, mengedit, dan mengoptimalkan file SVG

• SVG Viewer adalah alat web yang memungkinkan pratinjau dan pengeditan kode setelah mengunggah SVG, semuanya dalam satu layar
• Operasi pengeditan dasar seperti rotasi, pembalikan kiri-kanan dan atas-bawah, ubah ukuran, serta perapian kode bisa dilakukan langsung di browser
• Contoh optimasi menunjukkan ukuran SVG berkurang dari 578 bytes menjadi 493 bytes, turun -15%
• Selain mengunduh SVG, tersedia juga jalur konversi ke React, React Native, PNG, dan Data URI
• Daftar ikon serta aksi unggah, salin, unduh, dan bagikan ada di layar yang sama, sehingga alur dari memeriksa SVG hingga menggunakannya kembali bisa dilakukan dengan cepat

---

Pengeditan dan optimasi SVG

• SVG Viewer adalah alat web untuk melihat, mengedit, dan mengoptimalkan file SVG
• Layar pengeditan menampilkan kode SVG dan pratinjau secara bersamaan sehingga hasil perubahan kode bisa langsung dilihat

• Operasi yang tersedia

  • Rotate
  • Flip Y
  • Flip X
  • Change dimensions
  • Optimize
  • Prettify
  • Clear
  • Contoh SVG ditampilkan dengan ukuran 400px x 400px, dan kode <svg> terlihat di area editor kode
  • Status optimasi ditampilkan sebagai 578 bytes → 493 bytes, -15%

Impor dan ekspor

• Operasi file menyediakan aksi Upload, Copy, Download, dan Share
• Target ekspor atau konversi:
  • Preview
  • React
  • React Native
  • PNG
  • Data URI
• Layar menampilkan berbagai item ikon SVG seperti eye-close, gps, minus, lock-line, email, battery, document, comment, home, search, wifi, serta Load More SVGs
• Tautan untuk umpan balik, syarat penggunaan, dan kebijakan privasi juga disediakan

[GN⁺]

Pendapat di Hacker News

• Salah satu alat SVG berbasis web yang sering dipakai adalah https://jakearchibald.github.io/svgomg/. Ini adalah alat optimisasi SVG yang pengaturannya bisa diubah dengan sangat mendetail

  • Saya jadi sering memakai https://yqnn.github.io/svg-path-editor/. Andai Inkscape juga seintuitif ini saat menangani bagian dalam path; pekerjaan seperti konversi nilai absolut/relatif khususnya terasa sangat nyaman
  • Kalau menambahkan satu lagi alat SVG favorit, ada alat pemangkas SVG di https://svgcrop.com/. Saat ada ruang kosong lebar di sekitar SVG atau elemen aneh yang membuatnya sulit disejajarkan ke tengah, alat ini memangkas berdasarkan elemen yang terlihat
  • Alat ini juga bagus: https://www.softr.io/tools/svg-shape-generator
  • Saya memakai alat ini saat menyiapkan kumpulan simbol SVG: https://daveknispel.github.io/svg2use/
  • SVGOMG juga bisa digunakan di sini: https://svgomg.net/

• Tidak menyangka ini akan jadi topik hangat di Hacker News pada akhir pekan. Kami adalah perusahaan kecil di Vancouver, BC, dan membuat alat perangkat lunak: https://www.checkersoftware.ca/
  Kalau ada pertanyaan, beri tahu kami

  • Saya penasaran apakah webapp ini akan terus dipertahankan dengan model berbasis iklan, atau apakah dalam waktu dekat akan ada versi pro berbayar dengan fitur tambahan
  • Sebagian besar contoh berisi banyak path dengan deretan angka panjang, sehingga sulit langsung mengetahui path mana yang sesuai dengan bentuk mana pada gambar.
    Saya penasaran apakah di editor, saat kursor diarahkan ke kode, warna atau outline path terkait bisa diubah sementara, dan apakah hal serupa bisa dibuat untuk seleksi teks
  • Saya bukan developer React, jadi kurang paham dan ingin bertanya: apa kegunaan fitur mengekspor SVG ke React?
    Apakah ada alasan developer React memakai fitur ekspor React alih-alih memasukkan SVG secara inline?
  • Saya selalu memakai alat ini saat mengerjakan ikon

• Saya sempat mencobanya sebentar, dan kelihatannya sangat berguna saat suatu hari saya ingin menyelesaikan berbagai masalah kecil yang sering saya temui pada SVG yang saya pakai. UI-nya mudah dipahami dan umpan balik terhadap perubahan juga jelas, jadi langsung saya bookmark.
  Beberapa SVG sempat membuat halaman melebar sesaat saat loading, lalu setelah sangat sebentar baru menempati ukuran yang dimaksud. Saya sudah mencoba mengutak-atik viewBox, width, dan height, tetapi belum berhasil. Bagaimana cara mengurangi fenomena melebar awal ini?

  • Kilatan SVG sebelum style diterapkan bisa diperbaiki dengan menetapkan viewbox (viewBox) dan viewport (width, height) secara eksplisit: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
  • Saya penasaran apakah SVG bisa dikonversi secara instan ke format lain lebih cepat daripada browser. Dari sudut pandang non-ahli, ini terdengar seperti perilaku menginisialisasi bitmap ke ukuran maksimum lalu mem-parse SVG ke dalamnya

• Alat yang benar-benar bagus. Banyak fitur terkumpul di satu tempat. Biasanya saya memakai phpStorm; tidak ada fitur optimisasi ala SVGOMG, tetapi merapikan kodenya cukup baik.
  Akan lebih baik kalau contoh untuk mulai mengedit lebih bagus, dan tidak hanya memakai path tetapi juga bentuk dasar lain. Grid juga akan berguna.
  Misalnya, ikon pencarian bisa dibuat dengan circle dan line yang viewBox-nya diatur dengan baik. Jika titik asal diletakkan di pusat lingkaran, cukup perlu radius tanpa nilai x dan y, dan optimisasi yang nyaris tidak masuk akal seperti ini bisa dilakukan.
  Ikon pencarian umum biasanya dijejalkan menjadi path dengan ratusan angka NASA enam digit desimal. Padahal sebenarnya satu lingkaran yang didefinisikan dengan bilangan bulat sudah cukup; tidak perlu kumpulan sampah hasil ekspor Adobe Illustrator.
  SVG adalah medium artistik dan saya sangat menyukainya. Namun sepertinya baik seniman maupun developer tidak melihatnya seperti itu. Akibatnya, sebagian besar SVG tidak benar-benar menghidupkan semangat dari apa yang mungkin dilakukan, dan tidak menunjukkan dengan baik bahwa SVG lebih dari sekadar format file sederhana

• SVG benar-benar kuat. Minggu lalu ada masalah gambar transparan paralaks dengan filter drop-shadow yang tampil berantakan di Mac Safari dan iOS; solusinya adalah membuat outline gambar sebagai SVG dan memberi bayangan dengan filter SVG yang memakai feGaussianBlur.
  Rasanya saya baru menggores permukaan dari apa yang bisa dilakukan dengan SVG. Untuk optimisasi saya selama ini memakai svgomg, tetapi alat ini tampaknya punya cukup banyak fitur berguna tambahan

  • Saya mulai dengan frontend desktop Qt/QML, lalu mulai memikirkan seberapa banyak bagian yang bisa dibuat hanya dengan konfigurasi seperti imagemap SVG.
    Menjalankan Jupyter bersama koneksi data dan alat SVG ternyata menjadi pengalaman yang cukup membuka mata
  • Mungkin tidak realistis maupun tidak mungkin secara politis, tetapi akan sangat bagus kalau DWG, DXF, DGN digantikan oleh SVG. Tidak masuk akal bahwa gambar 2D di industri AEC tidak bisa digunakan dengan benar di sebagian besar program

• Saya memakai Inkscape, dan kalau ada yang kurang, saya memakai Xara Xtreme atau versi gratis lama untuk Linux.
  Tapi apa maksudnya mengoptimalkan SVG?

  • Menghapus informasi yang tidak perlu. Inkscape menambahkan banyak macam hal. Misalnya, kalau mengekspor SVG sederhana dari Figma lalu membukanya di Inkscape, menyimpannya, kemudian membandingkannya, perbedaannya terlihat

• Saya sangat menyukai situs ini dan sudah memakainya tak terhitung banyaknya. Sangat berguna untuk memahami elemen SVG yang aneh dan melihat hasilnya dengan cepat

• Beberapa tahun lalu saya membeli BoxySVG di Mac seharga 10 dolar, dan itu alat yang kecil serta bisa diandalkan.
  https://boxy-svg.com/

  • Sepertinya sekarang sudah beralih ke model berlangganan. Karena saya hanya membutuhkannya beberapa kali setahun, kalau 10 dolar saya ingin membelinya dan menyimpannya terus. Monodraw saya beli sekali seperti itu dan simpan; meski hanya dipakai sesekali, tetap merupakan alat yang memuaskan
  • Boxy layak direkomendasikan sebagai editor ringan SVG yang cepat untuk perbaikan sekilas

• Ini adalah resource sekaligus alat favorit saya saat mengutak-atik SVG. Saya sudah banyak mencari, tetapi belum menemukan yang lebih baik dari ini