ژ.ب ٨٠٧

وێنەفۆرماتی SVG بناسە


تا ئێستا بە شێوەیەکی بەربڵاو وێنەکانمان بە فۆرماتەکانی png, gif و jpg لەسەر وێب بڵاوکردووەتەوە و بە تایبەت فۆرماتی png کە بۆ وێنە سادەکانی وێب بەکاری دەبەین.

بە هۆکاری قەبارە بچووکیی و هەروەها هەبوونی Transparency لە ئەو فۆرماتەدا، فۆرماتی png وەک ستاندارد بەکار براوە بۆ گرافیکی ماڵپەڕ. فۆرماتێکی دیکە کە ساڵانێکە لە بوارەکەدا هەیە بەڵام لەوانەیە وەک png شوێنی خۆی دابین نەکردبێت فۆرماتی SVG ـە، کە کورتکراوەی Scalable Vector Graphics ـە.

لۆگۆی گرافیکی SVG

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

لە کاتی پاشەکەوتکردندا دەتوانین وەک فۆرماتی svg پاشەکەوتی بکەین. Adobe Illustrator ی وەک یەکێک لە فۆرماتە ستانداردەکانی کاری لەگەڵ دەکات.

پاشەکەوتکردنی وێنەی SVG لە پرۆگرامی Adobe Illustrator

یان لە نوێترین وەشانی Illustrator دەتوانین لە Asset Export دا فۆرماتی svg یان فۆرماتەکانی دیکە هەڵبژێرین.

وەدەرنانی کۆمەڵە وێنە لە پرۆگرامی Adobe Illustrator

هەر ئەوەندی پێویستە بۆ درووستکردن، دیارە جگە لە پرۆگرامەکانی وەک Illustrator دەتوانین بە نووسینی کۆد گرافیکی SVG سادە درووست بکەین وەک بازنە و چوارگۆشە و هتد… بەڵام لە وێبی ئەمڕۆدا گرافیکی پڕتر لە وردەکاری بەکار دەبەین کە بەهاوکاری پرۆگرام و ئامرازەکان نەبێت، داڕشتنیان لەوانەیە ئەوەندە ئاسان نەبێت.

پەڕگەی ناوبراو لە ئەنجام دا وەک وێنەی خوارەوە دەبێت و دەتوانین لە هەموو وێبگەڕەکاندا پێشبینی بکەین بە کوالیتی زۆر بەرز.

پێشبینی وێنەی SVG لە وێبگەڕی Safari لە سیستەمی ماک

لە ئەنجامدا ئەگەر webchin-logo.svg لە Code Editor ـێکدا بکەینەوە، دەبینین کە بریتییە لە کۆمەڵێک کۆدی XML کە خۆکارانە نووسراون.

بینینی کۆدی وێنەی SVG لە پرۆگرامەکانی کۆدنووس دا


ئەگەر بمانەوێت دەتوانین لە دۆخی کۆدنووسین دا دەستکاری وینەکەمان بکەین یان بیبەینەوە نێو 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 کە توانای گەورە و بچووک بوونە بەبێ لە دەستدانی باشیی/کوالیتی وێنەکە.

کارکردن لەگەڵ وێنە و گرافیکی SVG لە پرۆگرامەکانی کۆدنووس دا

کە ئەنجامی لە وێبگەڕدا دەبێتە،

پێشبینی کردنی وێنەی SVG بە چەندین قەبارەی جیاواز

کاتێک بەراوردی بکەین لەگەڵ وێنەیەکی ئاسایی png بە هەمان قەبارە و تایبەتمەندیی، جیاوازییەکە دەبینین.

پێشبینی کردنی وێنەی SVG لەسەر ئامێری وەک ئایپاد

لە بەشی سەرەوەی وێنەکە لۆگۆی وێبچن بە فۆرماتی svg دانراوە و لە خوارەوە بە png. ئەگەر لەسەر کۆمپیوتەرەکەت جیاوازییەکە کەمتر ڕوونە و تەلەفۆنێکی نوێت هەیە، دەتوانیت لەسەر تەلەفۆنەکەت تاقی بکەیتەوە.

پێشبینی کردنی وێنەی SVG لەسەر ئامێری خاوەن شاشەی High DPI

ئێستا کە بەشێک لە ئایکۆنەکانی وێبچن گۆڕدراون بۆ svg، کاتێک لەسەر ئامێرێکی High DPI سەیریان بکەین بە هەر قەبارەیەک، جیاوازییەکی یەکجار زۆر بەدی دەکەین. بە High DPI Screen مەبەستمان لە ئەو "شاشە"ی ئامێرانەیە کە بەپێی قەبارەی (گەورە/بچووکیی) شاشەوە ژمارەیەکی بەرزی PPI ـیان هەیە. Pixel Per Inch.

کۆمپانیای Apple ناوی Retina Display بەکار دەبات بۆ پێناسەکردنی ئەو جۆرە شاشانە کە لەسەرئامێرەکانی هەیە، لە وێنەی سەرەوە کە لەسەر ڕوومەتی ئایپادێک گیراوە، دەبینین کە ئەگەر Retina Display بێت توانای پیشاندانی پیکسڵی زۆرتری هەیە و لە ئەنجام دا وێنەی svg بە کوالیتی و ڕوونییەکی زۆرترەوە دەردەکەوێت.

وێنە بە فۆرماتی SVG لە ماڵپەڕەکاندا بە شێوەیەکی گشتیی بۆ لۆگۆ و ئایکۆن بەکار دەبرێت وەک مەبەستی سەرەکی، بەڵام ئەوە هیچ ڕێگرییەک ناکات لە ئەوەی کە وێنەی پڕتر لە وردەکاریی دابڕێژیت و وەک SVG بەکاری ببەیت.

بە هۆکاری توانای بزۆک بوونەوە SVG دەکرێت زۆر وردەکاری لەسەر جێبەجێ بکرێت، ببەستەرێت بە زمانێکی بزۆکی دیکەی وەک PHP کە بتوانین بە شێوەیەکی پرۆگراماتیکی وێنەی SVG درووست / Generate بکەین و لە شوێنە جیاوازەکانی ماڵپەڕ و پرۆژەکانمان بەکاری ببەین. بەڵام وەک دەستپێک تەنیا گۆڕینی فۆرمات لە png ـەوە بۆ svg هەنگاوێکی گەورەیە و دەستبەکاربوون لەسەر بەکاربردنی ئەو فۆرماتە کاتی هاتووە  و هیوادارم لە پرۆژە و کاری داهاتوودا زۆرتری لێ ببینین. تا کاتی نووسینی ئەم بابەتە ئەوەندەی من ئاگادار بم لە هیچ ماڵپەڕێکی کوردیدا گرینگی نەدراوە بە ئەو فۆرماتە و بەکارنەبراوە بە شێوەیەک کە بەکارهێنەری کوردیش بە بەردەوامیی بەشێک بێت لە وێبێکی مۆدێڕنتر. هیوادارم ئەو دۆخە بگۆڕدرێت.

کۆتایی.

تكایه‌ هه‌ژمارێك درووست بكه‌ بۆ ئه‌وه‌ی بتوانیت بۆچوون بنووسیت، كرته‌ له‌ ئێره‌ بكه‌ بۆ درووستكردنی هه‌ژمار
ئاسۆ نادری2016-08-29

قەبارەی ئاسایی خۆی*

ئاسۆ نادری2016-08-29

لۆگۆ پێویستی بە ئەوە نییە شتێکی تایبەتی بۆ بکەیت بە CSS، قەبارەی ئاسایی خۆت لەگەڵ وێنەکە ڕاستەوخۆ بنووسە.

<img src="logo.svg" width="250px" height="100px" alt="Website Logo">
Ranja Hseen2016-08-29

ئه‌توانی بۆم ڕوون بكه‌یته‌وه‌ لۆگۆی svg له‌ ڕووكارێكی responsive دا چۆن به‌كار بێنم؟ ده‌زانم قاباره‌یه‌كی دیاری كراوی بۆ داده‌نێیت، به‌ سی ئێس ئێس، به‌لام هه‌ندێ جار لۆگۆكه‌ بۆ نموونه‌ له‌ تابلێت دا شێوه‌ قه‌باره‌یه‌كی خۆی وه‌رده‌گرێت، یاخود له‌ مۆبایلی زۆر بچووكدا شێوه‌ی قه‌باره‌ی تایبه‌تی خۆی وه‌رده‌گرێت، من له‌ ڕووكاره‌كه‌ما به‌كارم هێنا و قه‌باره‌م بۆ دانا له‌ مۆبایلی ئایفۆندا لۆگۆكه‌ هاتبۆ ده‌ره‌وه‌ی سنوری شاشه‌كه‌وه‌.

Rawan2016-08-21

دەستخۆش کاک ئاسۆ، سوودم لێی بینی.

ئاسۆ نادری2016-08-21

لۆگۆگۆیەک کە کۆن بێت، دەبێت بکرێت بە Vector، بۆ کردن بە Vector دوو شێواز هەیە، یان ئەوەتە لۆگۆکە سەر لە نوێ لە Illustrator دابڕێژنەوە و ئەو کاتە بە Vector دەبێت. یان ئەوەتە Import ی بکەیت بۆ Illustrator و بە Image Tracing هەوڵ بدەیت کە Illustrator بۆ خۆی لۆگۆکە بکاتە Vector، بەڵام ئەمە هەموو کات سەرکەوتوو نابێت، بەتایبەت ئەگەر لۆگۆگە وێنە و وردەکاریی زۆری هەبێت.

زانیاری زۆرتر سەبارەت بە Image Tracing لە Adobe Illustrator،
https://www.youtube.com/watch?v=argiGgAD0Ck

کە وێنەکەت لە Illustrator ئامادە بوو وەک Vector، دواتر دەتوانیت بە svg پاشەکەوتی بکەیت و کێشەی نابێت.

Rawan2016-08-21

راستە، لە فۆتۆ شۆپم بردووە. ئەگەر لۆگۆی شوێنێک بکەم بە SVG  و زۆر لە مێژە لۆگۆیان هەیە و بە PSD یە،
ئەگەر convert بکەم بۆ illustrator دواتر بیکەم بە SVG ، کێشەی ئێستام بۆ دروست ناکات؟

Rawan2016-08-21

راستە، لە فۆتۆ شۆپم بردووە.بکەم بە SVG  و زۆر لە مێژە لۆگۆیان هەیە و بە PSD یە،
ئەگەر convert بکەم بۆ illustrator دواتر بیکەم بە SVG ، کێشەی ئێستام بۆ دروست ناکات؟

ئاسۆ نادری2016-08-21

کاک ڕەوەن، ئەو وێنەیەی تۆ Vector نییە، لەوە دەچێت لە پێشدا لە فۆتۆشۆپ نووسیبێتت و دواتر بردبێتتە Illustrator. ئەوە سەرناگرێت. دەبێت لە بنەڕەتدا بە Vector درووستی بکەیت بۆ ئەوەی ئەو کوالیتیە باشەی هەبێت.

واتە هەموو شتێک لە Illustrator بنووسە/درووست بکە، فۆتۆشۆپ پرۆگرامی درووست نییە بۆ کارکردن لەگەڵ Vector و SVG.

Rawan2016-08-21

فەرموو کاک ئاسۆ
http://www.webchinupload.com/f/2016-08/5f1bcdca4586132f343f9c37ab441f4a.zip

ئاسۆ نادری2016-08-21

باشە، لۆگۆکە دابنێ با بزانین بۆ وایە.

Rawan2016-08-21

کاک ئاسۆ ئەمەیان تێدەگەم، مەبەستم ئەوەیە کە سەیری لۆگۆی وێبچن دەکەی لێرە
https://www.webchin.org/Meko/style/Oxygen/webchin-meko-logo.svg

نەک لە ناو مالپەڕ دا. لە مالپەردا دەتوانین قەبارە بە ئارەزووی خۆمان زیاد و کەم بکەین.
هێندەی شاشە گەورە و بچووک بکەینەوە لۆگۆ یەکە گەورەو بچووک دەبێتەوە، ئەوەی من وا نیە.

ئاسۆ نادری2016-08-21

دەتوانین فایلەکە ببینین؟
کاتێک svg بەکار دەبەیت، پێویستە لە نێو تاگی img دا پانی و بەرزی بۆ دەستنیشان بکەیت، بۆ نموونە،

<img src="Meko/style/Oxygen/webchin-meko-logo.svg" alt="وێبچن" width="150px" height="80px">
Rawan2016-08-21

دەستخۆش، کاک ئاسۆ من ئێستا دروستم کرد بەلام وەک لۆگۆی وێبچن لەگەل هەموو شاشەکان ناگونجێت، واتە شاشە ئەوەندەی گەورە و بچووک بێت لۆگۆی وێبچن یەک بە شاشاکە دەردەکەوێت، بەلام ئەوەی من نا هۆکار چی یە؟

ڕێنوار2016-08-16

دەستت خۆشبێت، ڕاستی دەمێکە ئاگاداری SVGم  بەڵام شتێک ساردی ئەکردمەوە، ئەویش وام ئەزانی ئەبێت خۆت بە کۆد دروستی بکەیت وێنەکان، و ئەمەش پێویستی بە کەسی تابەیت بە بواری خۆیەتی، نەمزانیبوو کە coversion هەیە، سوپاس.

Ranja Hseen2016-08-16

ببوره‌ كۆمێنته‌كه‌ ده‌ستكاری نه‌كرا، مه‌به‌ستم له‌ قه‌باره‌ی لۆگۆ نموونه‌ی وه‌كوو ئه‌وه‌ی وێبچن ه‌ كه‌ پڕ به‌ شاشه‌كه‌ ده‌ر بكه‌وێت به‌ پێكسڵ چه‌ند دیاری بكه‌م به‌و شێوه‌یه‌ ده‌ره‌كه‌وێت؟

Ranja Hseen2016-08-16

ئه‌ی قه‌باره‌ی لۆگۆكه‌ پێویسته‌ چه‌ند به‌ چه‌ند درووست بكه‌ین سه‌ره‌تا ؟

Ranja Hseen2016-08-15

تێگه‌شتم لێت ته‌واو برام ده‌ستت خۆشبێت زۆر سوپاس بۆ تۆ smile

ئاسۆ نادری2016-08-15

ئەوە تەنیا بە مەبەستی Compatibility دانراوە، چوونکە کاتی خۆی سیستەمی iOS پاڵپشتیی لە ئەو جۆرە فایلە دەکرد، ئێستا لە Specs ی SVG لابراوە، واتە ئەمڕۆ درووست نییە گرینگی بە ئەوە بدەیت چوونکە لە هیچ وێبگەڕە مۆدێڕنەکاندا پاڵپشتیی لێ ناکرێت. جا ئەو فۆرماتی svg ـە دانراوە ئەگەر کەسێک ئامێرێکی کۆنی iOS ی هەبوو وەشانی سیستەمەکەی کۆن بوو، هەوڵ بدرێت ئەو svg ـە بەکار ببرێت. تەنیا ئەوە سوودەکەیەتی. ئەوەش باس لە وەشانەکانی iOS ی کۆنتر لە وەشانی ٤ دەکەین کە لەوانەیە کەس ئێستا بەکاری نەهێنێت. بۆیە گرینگییەکی نییە.

Ranja Hseen2016-08-15

ببوره‌ بۆ مه‌سه‌له‌ی فۆنته‌كه‌ مه‌به‌ستم ئه‌م كۆده‌ی خواره‌وه‌ بوو

url("//services.webchin.org/web-fonts/droidnaskhregular.svg#droidnaskhregular") format("svg");

له‌ فۆنت و تاگه‌ به‌كار هێنراوه‌كانی دی تێگه‌شتووم به‌س تێ نه‌گه‌شتم ئه‌وه‌ی سه‌ره‌وه‌ بۆ چیه‌ كه‌ له‌ گه‌ڵ فۆنته‌كانی تردا به‌كار هێنراوه‌.

Ranja Hseen2016-08-15

ده‌ستت خۆشبێت كاك ئاسۆ بۆ ڕوونكردنه‌وه‌كه‌ت، من بۆیه‌ پرسیم چوونكه‌ من زیاتر title به‌كار دێنم بۆ به‌سته‌ر لینكیش، وتم گه‌ر جیاوازیه‌كی ئه‌وتۆی نه‌بێت له‌ SEO  دا  و گۆگڵ بیناسێته‌وه‌، ئه‌وا هه‌ر له‌سه‌ر كاره‌كه‌م به‌رده‌وام ده‌بم.

ئاسۆ نادری2016-08-15

سەبارەت بە alt و title، دیارە ئەو دوو تایبەتمەندییە سەر بە تاگی img ـن، نەک بەشێک بن لە پرۆسەی SVG بەکاربردن.
Alt Text واتە تێکستێک کە پێناسەی وێنەکە بکات، سوودی SEO ی هەیە ،کە گووگڵ دەزانێت ئەو وێنەیەی کە بەکارت بردووە وێنەی چییە. هەروەها سوودی دیکەی ئەوەیە کە کەسێکی نابینیا بە ئامێرێکی تایبەت ئەو ماڵپەڕە بکاتەوە، ناتوانێت وێنەکە ببینێت، بەڵام ئامێرەکەی دەتوانێت Alt Text ـەکەی بۆ بخوێنێتەوە و بە ئەو شێوەیەش ئەو کەسە نابینایە بێ بەش نابێت لە زانیارییەکە. دیارە ئەم باسە بۆ بەکارهێنەری کورد نامۆیە، من بۆ خۆم هیچ زانیارییەکم نییە کە ئایا ئامێری Screen Reader هەیە بۆ نابینای کوردزمان کە پاڵپشتی کوردی بکات یان نە.

Title لە لایەکی دیکەوە، دەکرێت تەواوکەری alt بێت، واتە دەتوانیت پێناسەیەکی درێژتر سەبارەت بە وێنەکە بنووسیت لە نێو تاگی Title دا، کە هەم زانیاری زۆرتر دەداتە گووگڵ و هەم بەکارهێنەری ئاساییش دەتوانێت سوودی لێ ببینێت کاتێک Mouse Over ی ئەو وێنەیە بکات.

جا بەکاربردنی alt مەرجە، بەڵام ئەگەر بە title تەواوتر بکرێت سوودی زۆرترە.

ئاسۆ نادری2016-08-15

@Ranja Hseen، ئەگەر مەبەستت ئەوە بێت کە کۆمەڵێک ئایکۆن درووست بکەیت، دواتر ئەو ئایکۆنانە وەک فۆنتێک کۆ بکەیتەوە، بەڵێ دەتوانیت و پێی دەوترێت Icon Font، واتە فۆنتێک کە بەکاری ببەیت بۆ نووسینی ئایکۆنەکان لە باتی بەکاربردنی svg وەک وێنە.

بەڵام، ئەو فۆنتەی کە درووستی دەکەیت، وەک ئاماژەم پێدا دەبێتە ئایکۆن فۆنت، نەک فۆنتی ئاسایی، واتە ناتوانیت فۆنتی ئاسایی لەسەر بنەمای پیت بە ئەو تەکنیکە درووست بکەیت.

هەروەها ئایکۆنەکان دەبێت یەک ڕەنگی سادەیی بن. وا دابنێین ئایکۆنەکانت بە فۆرماتی SVG درووست کردووە، دەتوانیت ئامرازێکی وەک https://icomoon.io/app بەکار ببەیت و ئەو ئایکۆنانە لە فۆنتێکدا کۆبکەیتەوە، بۆ نموونە font.ttf، کە دەتوانیت لە کۆتاییدا وەک وێب فۆنت بەکاری ببەیت.

بەڵام ئەوەش کۆمەڵێک وردەکاریی لەگەڵ خۆیدا دەهێنێت کە ئایا باشترە یەک وێنە بەکار ببەیت یان چەندین فۆنت درووست بکەیت بۆ ئەوەی لە هەموو وێبگەڕێکدا کار بکات؟ کامیان لە ئەنجامدا سوودی زۆرتر دەبێت.

دەتوانم لە داهاتوودا بابەتێکی دیکە بنووسم سەبارەت بە ئەو پرۆسەیە کە ئاسان نییە بە پەیامێک هەموو لایەنەکانی بخەمە ڕوو. تا ئەو کاتە سەیری ئەو دوو بەستەرە بکە،

https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/SVG_fonts
http://caniuse.com/#feat=svg-fonts

Ranja Hseen2016-08-15

سه‌ره‌تا ده‌ست خۆشیت لێ ده‌كه‌م بابه‌تیكی زۆر نایابه‌ و هیچت نه‌هێشتۆته‌وه‌ بۆ ویبداڕێژ كه‌ پێویستی پێبێت، من هه‌ندێ پرسیارم لا درووست بووه‌،  پرۆژه‌ی وام بینیوه‌ فۆنته‌كانیشی SVG تێدا به‌كار هێنراوه‌ ئایا ئه‌وه‌یان چۆنه‌؟
لێره‌یا باسی   alt  و title ده‌كه‌یت

وەک دەزانین دەتوانین alt  و title لە نێو تاگی img بەکار ببەین، لە ئێرەش هەروایە و هیوادارم هیچ کاتێک لە بیری نەکەیت. Alt گرینگی خۆی هەیە و هەموو وێنەیەک پێویستە Alt Text ی درووستی هەبێت.


ئایا چی جیاوازی له‌ نێوان  alt  و title دا هه‌یه‌ ؟ هه‌ر وه‌ها له‌ سیۆدا كامیان گرنگترن گرنگیان پێ بدریت له‌ پرۆسه‌ی SVG دا.

ئاسۆ نادری2016-08-14

دیارە ئەو باسەی کاک هێدی لە ڕاستیدا پەیوەندی بە فۆرماتی svg ـەوە نییە. وێنەکە چ فۆرماتێکی هەیە گرینگ نییە لە کاتی دەرکەوتن. کێشەکەی لەوەدا بوو کە Zoom ی درووست نەبوو، وەک کاک خەڵات ئاماژەی پێکردووە. بۆیە دەتوانین بڵێین، بگەڕێینەوە سەر ئەسڵی باسەکەمان کە svg ـە. smile

xalat2016-08-14

به‌یارمه‌تی كاك ئاسۆ، كاك هێدی Zoom ى Google Chrome ـه‌كه‌ بكه‌ به‌ 100% ، چاك ئه‌بێت .

http://www.webchinupload.com/f/2016-08/c1c09ad18c8b025a8245dd86c724a333.png

xalat2016-08-14

لای من كێشه‌ی نیه‌ و Google Chrome یشه‌ هه‌رhttp://www.webchinupload.com/f/2016-08/58977d3d59fa1d7583748c5ffdf0ad01.PNG

هێدی سه‌رمۆردی2016-08-14

پێشتریش لە Private  سەیرم کرد ئەوەش ئیستایە .
http://www.webchinupload.com/f/2016-08/9f8952315f92a5b2656fc8cdb91e9fbc.png

ئاسۆ نادری2016-08-14

کاک هێدی لە تابێکی Private بیکەوە دەبینی کە کێشەی نییە. چوونکە لە تابە ئاساییەکەت کاش بووە، هەرچەندە من لە ئێرەوە کاشم Invalid کردووە بۆ ئەو CSS ـە کۆنە، لەبەر هەر هۆکارێک هەیە جێبەجێ نەبووە بە تەواوی.

لە Chrome بە کلیلەکانی Ctrl+Shift+N

هێدی سه‌رمۆردی2016-08-14

کاکە لاى من هەروایە .

ئاسۆ نادری2016-08-14

کاک هێدی Refresh ـێک بکە. بە F5.

هێدی سه‌رمۆردی2016-08-14

دەست خۆش کاک ئاسۆ بەلام لە google chrome جوانى کارەکە دەرناکەویت کەمیک کیشەی هیە .
http://www.webchinupload.com/f/2016-08/fc73af914a30728fe4d75bfacf25a0f5.png

ئاسۆ نادری2016-08-14

وایە، ماوەیەکی کەمە لە وێبچن وێنەکانم گۆڕیووە، بەڵام کاتی خۆی بوو. ئێستا لە جاران باشترە و هەندێک سوودی خێرایشیی لەگەڵ خۆی هێناوە.

xalat2016-08-14

ده‌ستت خۆشبێت كاك ئاسۆ ئه‌و SVG ـه‌ ببوه‌ مایه‌ی پرسیار لای من له‌و كاته‌ی ئه‌مه‌م بینی https://www.webchin.org/Meko/style/Oxygen/webchin-meko-logo.svg ، وه‌ له‌بیرم كرد بگه‌رێم به‌شوێنیدا، به‌ڵام به‌ڕێزت وه‌بیرت هێنامه‌وه‌ و سوودم له‌ بابه‌ته‌كه‌ وه‌رگرت هه‌ربژیت .