در مقاله‌ی قبل (آشنایی با SVG) به مباحث کلی و ابتدایی SVG پرداختیم. حال در این مقاله قرار است سطح کار را بالاتر ببریم و با مباحث پیشرفته‌تر آن آشنا شویم.

Stroke و Fill

برای دادن رنگ به عنصرهایی که داریم از attribute های Fill و Stroke استفاده می‌کنیم. Fill برای رنگ‌آمیزی داخل عنصرها و Stroke برای رنگ‌آمیزی حاشیه بیرونی آنهاست.

در جدول زیر لیست attribute های آن را می بینید :

در اینجا به چند مثال می پردازیم :
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zZXKeV” default_tab=”html,result” user=”navidagz”]See the Pen zZXKeV by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dvLprM” default_tab=”html,result” user=”navidagz”]See the Pen dvLprM by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jBRMJp” default_tab=”html,result” user=”navidagz”]See the Pen jBRMJp by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EWJgMq” default_tab=”html,result” user=”navidagz”]See the Pen EWJgMq by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mWgrgW” default_tab=”html,result” user=”navidagz”]See the Pen mWgrgW by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

متن

از تگ <text> برای نوشتن متن استفاده می‌کنیم، که syntax آن به صورت زیر است:

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

در جدول زیر لیست attribute های آن را می بینید :

در اینجا به چند مثال می پردازیم :
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”RpOGQR” default_tab=”html,result” user=”navidagz”]See the Pen RpOGQR by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qrwaYW” default_tab=”html,result” user=”navidagz”]See the Pen qrwaYW by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

شما می توانید تگ <text> را به چندین زیر گروه تقسیم کنید، که هر کدام از زیر گروه‌ها با تگ <tspan> مشخص می‌شوند.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”vxMXrK” default_tab=”html,result” user=”navidagz”]See the Pen vxMXrK by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

برای تبدیل کردن متن خود به لینک از روش زیر استفاده می‌کنیم:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”WpWGLz” default_tab=”html,result” user=”navidagz”]See the Pen WpWGLz by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

الگو

از تگ <pattern> برای مشخص کردن الگو استفاده می‌کنیم، که به صورت کاشی‌کاری کلاسیک عنصر ها را کنار هم قرار می‌دهد.

در جدول زیر لیست attribute های آن را می بینید :

در اینجا به چند مثال می پردازیم :
[codepen_embed height=”569″ theme_id=”0″ slug_hash=”yMrVYw” default_tab=”html,result” user=”navidagz”]See the Pen yMrVYw by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

[codepen_embed height=”285″ theme_id=”0″ slug_hash=”BWEQzx” default_tab=”html,result” user=”navidagz”]See the Pen BWEQzx by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

تعامل (Interactivity) در SVG

تصاویر SVG می‌توانند با کاربر در تعامل باشند و عکس‌العمل از پیش تعریف شده‌ای که برای آن مشخص کردیم را انجام دهد. SVG از رویدادهای اشاره‌گر، صفحه کلید و document پشتیبانی می‌کند. برای پیاده‌سازی این رویدادها باید از JavaScript استفاده کنیم.

در اینجا به یک مثال می پردازیم :

[codepen_embed height=”549″ theme_id=”0″ slug_hash=”wJZoeE” default_tab=”html,result” user=”navidagz”]See the Pen wJZoeE by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

در این مقاله سعی شد که مباحث پراستفاده SVG پوشش داده شود. برای درک بیشتر این موضوعات حتما باید دست به کار شوید و خودتان تصاویر SVG را بسازید.