تا ئێستا بە شێوەیەکی بەربڵاو وێنەکانمان بە فۆرماتەکانی png, gif و jpg لەسەر وێب بڵاوکردووەتەوە و بە تایبەت فۆرماتی png کە بۆ وێنە سادەکانی وێب بەکاری دەبەین.
بە هۆکاری قەبارە بچووکیی و هەروەها هەبوونی Transparency لە ئەو فۆرماتەدا، فۆرماتی png وەک ستاندارد بەکار براوە بۆ گرافیکی ماڵپەڕ. فۆرماتێکی دیکە کە ساڵانێکە لە بوارەکەدا هەیە بەڵام لەوانەیە وەک png شوێنی خۆی دابین نەکردبێت فۆرماتی SVG ـە، کە کورتکراوەی Scalable Vector Graphics ـە.
Scalable Vector Graphics وەک لە ناوەیەکدا ڕوونە لەسەر بنەمای Vector پێناس دەکرێن و پێکدێن، کە ئەمەش وادەکات وێنەکانی SVG بەبێ لە دەستدانی کوالیتی و شێوازی بنەڕەتیی خۆی، بتوانرێت گەورە و بچووک بکرێتەوە.
ئەمڕۆ لە سایەی هەبوونی مۆنیتۆری 4k, 5k و لە داهاتووش دا 8k، هەروەها شاشەی مۆبایل بە کۆمەڵێک پیکسڵی زۆرەوە High DPI Screens، وا دەکات کە SVG هەڵبژاردەی یەکەم بێت. گرافیک و وێنەی SVG بە شێوەیەکی یەکجار جوان و بێ پیکسڵ لەسەر ئەو مۆنیتۆرانە دەردەکەون.
خاڵێکی دیکەی SVG ئەوەیە کە Flexible ـە، واتە دەتوانین هەمان وێنەی SVG بەکار ببەینەوە بە قەبارەی جیاواز و ئەگەریش بمانەوێت دەتوانین وەک گرافیکی بزۆک / Dynamic بەکاری ببەین کە تەنیا بە دانانی چەند Parameter ـێک بتوانین قەبارە و تایبەتمەندییەکانی وێنە کۆنترۆڵ بکەین و لە شوێنە جیاوازەکانی پرۆژەکەمان بەکاری ببەین. ئەمە لە خۆیدا تایبەتمەندییەکە کە دەبێتە هۆکاری کەمبوونەوەی HTTP Header Requests و لە ئەنجام دا بەردێکی گرینگی خێرابوونی ماڵپەڕ دەبێت.
هەموو پەڕگەیەکی SVG لە کۆمەڵێک کۆدی XML پێکدێن کە لە کاتی درووستکردنی وێنەکاندا خۆکارانە پرۆگرامەکانی وێنە ئەو کۆدانە دەنووسرێن. گرینگی لەوەدایە بە هۆکاری ئەوەی کە لەسەر بنەمای کۆدە، دەتوانین وەک HTML بە ستایڵی تایبەت بە ئارەزووی خۆمان دەسەڵاتداری ئەنجامی هەموو وێنەیەکی SVG بین.
لە زۆرینەی دۆخەکاندا قەبارەی وێنەی فۆرماتی svg بچووکتر دەبێت لە فۆرماتەکانی دیکەی وەک png، کە لە کۆتاییدا کاریگەریی بەرچاوی دەبێت لە خێرابوونی ماڵپەڕ و لە هەمووی گرینگتر گرافیکی ماڵپەڕ لە سەر هەموو ئامێرەکانی High DPI یەکجار جوان و پڕ ڕەنگ دەردەکەوێت.
چۆنیەتی درووستکردنی وێنەی SVG
کۆمەڵێک پرۆگرام و ئامراز هەن کە دەتوانن هاوکاریمان بکەن بۆ داڕشتنی وێنەکانی SVG، سەرەکی ترین پرۆگرام لە زۆربەی زارەکان Adobe Illustrator ـە. پرۆگرامی دیکەی وەک Inkscape هەیە کە خۆڕاییە. لە ئەم بابەتەدا من پرۆگرامی Adobe Illustrator لە نموونەکاندا بەکار دەبەم، بەڵام هەمان ئەنجام لە Inkscape دەستەبەر دەکرێت.
درووستکردنی پەڕگەیەکی SVG وەک هەموو پەڕگەیەکی دیکەی Adobe Illustrator دەست پێدەکات و وێنە/نووسینەکانمان دەنووسین. هەنگاوێک کە گرینگە لە ئێرەدا ئەوەیە، کاتێک پەڕگەکەمان درووست دەکەین باشتر وایە بە ئەو قەبارەیە بێت کە لە پرۆژەکەمان بەکاری دەبەین. لە ئەو بنەمایەوە دەست پێبکەین وەک قەبارەی Size ی سەرەکی.
لە کاتی پاشەکەوتکردندا دەتوانین وەک فۆرماتی svg پاشەکەوتی بکەین. Adobe Illustrator ی وەک یەکێک لە فۆرماتە ستانداردەکانی کاری لەگەڵ دەکات.
یان لە نوێترین وەشانی Illustrator دەتوانین لە Asset Export دا فۆرماتی svg یان فۆرماتەکانی دیکە هەڵبژێرین.
هەر ئەوەندی پێویستە بۆ درووستکردن، دیارە جگە لە پرۆگرامەکانی وەک Illustrator دەتوانین بە نووسینی کۆد گرافیکی SVG سادە درووست بکەین وەک بازنە و چوارگۆشە و هتد… بەڵام لە وێبی ئەمڕۆدا گرافیکی پڕتر لە وردەکاری بەکار دەبەین کە بەهاوکاری پرۆگرام و ئامرازەکان نەبێت، داڕشتنیان لەوانەیە ئەوەندە ئاسان نەبێت.
پەڕگەی ناوبراو لە ئەنجام دا وەک وێنەی خوارەوە دەبێت و دەتوانین لە هەموو وێبگەڕەکاندا پێشبینی بکەین بە کوالیتی زۆر بەرز.
لە ئەنجامدا ئەگەر webchin-logo.svg لە Code Editor ـێکدا بکەینەوە، دەبینین کە بریتییە لە کۆمەڵێک کۆدی XML کە خۆکارانە نووسراون.
ئەگەر بمانەوێت دەتوانین لە دۆخی کۆدنووسین دا دەستکاری وینەکەمان بکەین یان بیبەینەوە نێو Illustrator و لەوێ گۆڕانکارییەکان جێبەجێ بکەین. ئەمەش خاڵێکی دیکەی بەهێزی SVG ـە، بۆ نموونە بۆ دەستکاریکردنی وێنەیەکی png پێویست دەکات پرۆگرامێکی وەک فۆتۆشۆپ بەکار ببەین، بۆ svg ئەگەر پرۆگرامی کارکردن لەگەڵ گرافیکمان نەبوو، دەتوانین لە هەر Text/Code Editor ـێک دا بێت کاری لەسەر بکەین.
چۆنیەتی بەکاربردن لە نێو مالپەڕ
خۆشبەختانە بەکارهێنانی SVG ئەمڕۆ لەسەر وێب زۆر ئاسانە، هەموو وێبگەڕە مۆدێڕنەکانی مۆبایل و دێسکتۆپ پاڵپشتی SVG دەکەن لە نێو تاگی ئاسایی <img>، واتە وەک هەر وینەیەکی دیکەی ئاسایی png یان jpg بەکاری دەبەین.
لە پێشنیارەکانی W3C دا ئاماژە بە ئەوە کراوە کە لە نێو تاگی <object> دا بەکار ببرێت چوونکە لە هەمان کاتدا دەتوانین ئاماژە بە ئەوە بدەین ئەگەر وێبگەڕ پاڵپشتی SVG نەکرد، وێنەیەکی ئاسایی وەک png پیشان بدرێت لە شوێنیدا، بۆ نموونە،
<object data="wene.svg" type="image/svg+xml">
<img src="wene.png" />
</object>
کۆدی سەرەوە درووستە و پێشنیار ئەوەیە کە بەکار ببرێت، بەڵام ئەوە لە کاتێکدا گرینگ بوو کە تاگی <img> بە تەواوی لەگەڵ SVG ڕێکنەخرابوو، لە ئێستادا دەتوانین ڕاستەوخۆ لە تاگی <img> سوود وەربگرین و کۆدەکەمان دەبێتە،
<img src="webchin-logo.svg">
وەک دەزانین دەتوانین alt و title لە نێو تاگی img بەکار ببەین، لە ئێرەش هەروایە و هیوادارم هیچ کاتێک لە بیری نەکەیت. Alt گرینگی خۆی هەیە و هەموو وێنەیەک پێویستە Alt Text ی درووستی هەبێت.
بە مەبەستی ڕوونکردنەوەی زۆرتر، هەمان وێنەم لە پەڕەیەکی HTMLی بە چەند قەبارەی جیاواز بەکاربردووەتەوە بە مەبەستی ڕوونکردنەوەی بەهێزترین لایەنی SVG کە توانای گەورە و بچووک بوونە بەبێ لە دەستدانی باشیی/کوالیتی وێنەکە.
کە ئەنجامی لە وێبگەڕدا دەبێتە،
کاتێک بەراوردی بکەین لەگەڵ وێنەیەکی ئاسایی png بە هەمان قەبارە و تایبەتمەندیی، جیاوازییەکە دەبینین.
لە بەشی سەرەوەی وێنەکە لۆگۆی وێبچن بە فۆرماتی svg دانراوە و لە خوارەوە بە png. ئەگەر لەسەر کۆمپیوتەرەکەت جیاوازییەکە کەمتر ڕوونە و تەلەفۆنێکی نوێت هەیە، دەتوانیت لەسەر تەلەفۆنەکەت تاقی بکەیتەوە.
ئێستا کە بەشێک لە ئایکۆنەکانی وێبچن گۆڕدراون بۆ svg، کاتێک لەسەر ئامێرێکی High DPI سەیریان بکەین بە هەر قەبارەیەک، جیاوازییەکی یەکجار زۆر بەدی دەکەین. بە High DPI Screen مەبەستمان لە ئەو "شاشە"ی ئامێرانەیە کە بەپێی قەبارەی (گەورە/بچووکیی) شاشەوە ژمارەیەکی بەرزی PPI ـیان هەیە. Pixel Per Inch.
کۆمپانیای Apple ناوی Retina Display بەکار دەبات بۆ پێناسەکردنی ئەو جۆرە شاشانە کە لەسەرئامێرەکانی هەیە، لە وێنەی سەرەوە کە لەسەر ڕوومەتی ئایپادێک گیراوە، دەبینین کە ئەگەر Retina Display بێت توانای پیشاندانی پیکسڵی زۆرتری هەیە و لە ئەنجام دا وێنەی svg بە کوالیتی و ڕوونییەکی زۆرترەوە دەردەکەوێت.
وێنە بە فۆرماتی SVG لە ماڵپەڕەکاندا بە شێوەیەکی گشتیی بۆ لۆگۆ و ئایکۆن بەکار دەبرێت وەک مەبەستی سەرەکی، بەڵام ئەوە هیچ ڕێگرییەک ناکات لە ئەوەی کە وێنەی پڕتر لە وردەکاریی دابڕێژیت و وەک SVG بەکاری ببەیت.
بە هۆکاری توانای بزۆک بوونەوە SVG دەکرێت زۆر وردەکاری لەسەر جێبەجێ بکرێت، ببەستەرێت بە زمانێکی بزۆکی دیکەی وەک PHP کە بتوانین بە شێوەیەکی پرۆگراماتیکی وێنەی SVG درووست / Generate بکەین و لە شوێنە جیاوازەکانی ماڵپەڕ و پرۆژەکانمان بەکاری ببەین. بەڵام وەک دەستپێک تەنیا گۆڕینی فۆرمات لە png ـەوە بۆ svg هەنگاوێکی گەورەیە و دەستبەکاربوون لەسەر بەکاربردنی ئەو فۆرماتە کاتی هاتووە و هیوادارم لە پرۆژە و کاری داهاتوودا زۆرتری لێ ببینین. تا کاتی نووسینی ئەم بابەتە ئەوەندەی من ئاگادار بم لە هیچ ماڵپەڕێکی کوردیدا گرینگی نەدراوە بە ئەو فۆرماتە و بەکارنەبراوە بە شێوەیەک کە بەکارهێنەری کوردیش بە بەردەوامیی بەشێک بێت لە وێبێکی مۆدێڕنتر. هیوادارم ئەو دۆخە بگۆڕدرێت.
کۆتایی.
