نمایش صحیح فایل های SVG در QML

اگر بخواید توی QML و توی کامپوننت Image یه عکس svg نمایش بدید،شاید ببینید که مات شده(مثل عکس سمت راست)! و باعث تعجبتون میشه احتمالا، که آقا مگه SVG با بزرگ و کوچک شدن کیفیتش میاد پایین؟ (فایل های SVG وکتور هستن، و ربطی به تعداد پیکسل ندارن و با کوچک و بزرگ شدن کیفیتشون تغییر نمیکنه، در واقع SVG بر اساس پیکسل نیست و یه سری فرمول ریاضیه، که میاد روی پیکسلا میکشه!)

Image {
source: &quotsvgImage.svg&quot
fillMode: Image.PreserveAspectFit
width: 500
height: 500
}

اگر این فایل svg با یه تکس ادیتور باز کنیم ، میبینیم که توش اینجور چیزی هست

<svg xmlns=&quothttp://www.w3.org/2000/svg&quot width=&quot79.139&quot height=&quot122.864&quot viewBox=&quot0 0 79.139 122.864&quot>
 <path id=&quotPath_1&quot data-name=&quotPath 1&quot d=&quotM79.882,130.769l22.485-41.42s20.71-40.237,36.686,0-18.343,26.627-18.343,26.627,25.444,58.58-9.467,42.012-33.728,8.876-33.728,8.876,11.243,47.929-7.1,17.16S79.882,130.769,79.882,130.769Z&quot transform=&quottranslate(-64.155 -71.466)&quot/>
</svg>

یعنی این عکسی که میبینم توسط این فایل بالایی ساخته شده، اون قسمتی که فعلا کار داریم این تیکه کد هست،

 viewBox=&quot0 0 79.139 122.864&quot

اینجا مشخص شده که اندازه جایی که svg میخواد توش نمایش داده بشه(کشیده بشه) چقدره، بای دیفالت وقتی یکی این فایل میخونه واحد پیکسل در نظر میگیره، همچنین QML هم اینکارو میکنه.

یعنی کار نداره ابعاد کامپوننت Image ما چقدره، اول میاد این svg در یک مستطیل 79 در 122 میکشه، بعد همونو بزرگ میکنه، یا اسکیل آپ میکنه و نمایش میده، و از اونجایی که سایز چیزی که ما میخوایم نمایش بدیم بر اساس کد 500 در 500 هست پس افت کیفیت پیدا میکنیم! و تازه کامپوننت QML منت گذاشته یکم لبه ها رو نرم هم کرده! وگرنا یه عکس دندونه دندونه شده تحویل میگرفتیم!

خب راه حل چیه؟ راه حل اینه که بهش از اول درست بگیم که اندازه و تعداد پیکسلی که قراره توش svg بکشه چقدره، چجوری ؟ به صورت زیر

sourceSize: Qt.size( image.width, image.height )

با این پراپرتی بهش میگیم که اندازه ای که توی خود فایل svg مشخص شده رو نادیده بگیره، و بجاش از این طول و عرض استفاده کنه و اگر مثلا اندازه چیزی که میخوایم نمایش بدیم 500 در 500 پیکسل هست، اونم فایل svg تو همین تعداد پیکسل بکشه...

و عکس سمت چپ نتیجه استفاده از پراپرتی سورس سایز هست.

+خبر خوب این که یه کامپوننت ساده ساختم توی گیت هاب و میتونید از اون استفاده کنید و فایل های svg با کیفیت خوب نمایش بدید و نگران بقیه داستان ها نباشید. :).

+ اینجا یکم درباره تفاوت SVG و PNG توضیح داده شده.