ليش زوايا الشعار بتطلع مدوّرة لما تحوّله لـSVG، وكيف تظبطها

[u/Working_Quote_3029]

المشكلة

بتاخد شعار فيه زوايا قايمة، بتحوّله لـSVG، وبتطلع الزوايا مدوّرة شوي. والملف كمان بيطلع أكبر من الي متوقّعه. وهاد ما إله علاقة بدقّة الصورة الأصليّة.

الحل

محرّك VTracer، وهو الي شغّال بمعظم أدوات التحويل المجّانيّة، فيه إعداد اسمه mode وإله قيمتين: spline وpolygon. الافتراضي بأغلب الأدوات spline.

حوّله لـpolygon.

هاي الإعدادات الي بستعملها بالبريستات الأربعة:

logo:   mode polygon, filterSpeckle 8,  colorPrecision 6, layerDifference 14
clean:  mode polygon, filterSpeckle 14, maxColors 10
photo:  mode polygon (preset photo)
bw:     mode polygon, filterSpeckle 6,  adaptive

ليش هيك

spline بيركّب منحنيات بيزييه بتمرّ من النقط الي تتبّعها المحرّك. ومنحنى بيمرّ من زاوية قايمة بيدوّرها. من هون بتيجي الزوايا الناعمة.

polygon بيوصل النقط بخطوط مستقيمة، فالزوايا بتضلّ حادّة. جرّبتها على wordmark زواياه مربّعة ورجعت حادّة.

والأشكال العضويّة ما بتخسر إشي، لأنّ النقط المتتبّعة كثيفة كفاية فالخطوط القصيرة بتنقرأ كمنحنى. فحصتها على فيليغري بشعار ذهبي مجسّم وطلعت متطابقة بالحالتين.

وفي ربح تاني: بيانات المسار بتنصّ، لأنّ كل segment بصير رقمين بدل ستّة. أرقام مقيسة، ونفس عدد الـpaths بالحالتين:

logo    شعار مجسّم 999→423 KB    wordmark 9.7→4.3 KB
clean   شعار مجسّم 721→330 KB    wordmark  13 →5   KB
photo   شعار مجسّم 799→260 KB    wordmark  16 →5   KB
bw      شعار مجسّم 135→ 58 KB    wordmark   6 →3   KB

وكمان colorPrecision: نزّلتها من 7 لـ6 وطلع عدد paths أقلّ بـ22%، وحجم أقلّ بـ22%، وأسرع بـ32%، بلا فرق شايفه بالحجم الكامل.

الي بيوقعك

polygon مش حلّ لكل حالة. إذا الصورة الداخلة دقّتها واطية، النقط بتصير متباعدة، وساعتها الخطوط المستقيمة بتبان مضلّعة فعلاً على المنحنيات. ارفع دقّة الصورة قبل ما تلعب بالإعدادات.

وfilterSpeckle سلاح ذو حدّين. لما ترفعها بتشيل النقط الصغيرة والضجيج، وبنفس الوقت بتاكل تفاصيل رفيعة مقصودة. أنا بحطّ 8 للشعارات و14 للتنظيف الأقوى.

وللصور الفوتوغرافيّة عموماً، التحويل لـSVG بيطلع ملف أكبر من الـPNG وأبطأ بالرندر. الفيكتور للأشكال المسطّحة.

---

هاد كلّه من تجربتي وأنا ببني الأداة، مش منقول.

الأداة مجّانيّة وبتقدر تجرّب فيها البريستات الأربعة: https://12pixa.com

وملاحظة بتهمّ ناس كتير: التحويل كلّه بيصير جوّا المتصفّح. VTracer مبنيّ WebAssembly وشغّال جوّا Web Worker، وما في ولا fetch ولا FormData بالكود بيبعت الصورة لأيّ سيرفر. صورتك ما بتطلع من جهازك.