معرفی فرمت SVG و نحوه استفاده از آن در وب
معرفی فرمت SVG و نحوه استفاده از آن در وب » در این مقاله آموزشی، تصاویر با فرمت svg را معرفی کرده و ضرورت استفاده از آنها را در وب سایت بیان می کنیم و نحوه طراحی خط، مستطیل، دایره و چندضلعی را با svg آموزش می دهیم.

معرفی فرمت SVG و نحوه استفاده از آن در وب

Getting Started With Scalable Vector Graphics (SVG)

تصویر svg در وب سایت

 

استفاده از تصاویر SVG در وب سایت

 

لزوم استفاده از SVG در وب:

این روزها برای طراحان وب اهمیت زیادی دارد که نحوه پیاده سازی فرمت SVG (Scalable Vector Graphics) در وب سایت خود را بلد باشند. در این مقاله می خواهیم مبانی فرمت SVG را بیان کنیم و نحوه استفاده از SVG را در یک صفحه وب آموزش خواهیم داد.

 

ویژگی های فرمت SVG:

  • واژه SVG مخفف عبارت "Scalable Vector Graphics" می باشد.
  • SVG برای تعریف گرافیک وکتوری در وب سایت بکار می رود.
  • از فرمت XML برای تعریف گرافیک وکتوری (Vector Graphics) در وب استفاده می شود.
  • با افزایش اندازه تصاویر svg و یا زوم کردن روی آنها، کیفیت svg کاهش نمی یابد.
  • روی تصاویر با فرمت svg می توان انیمیشن اعمال کرد.
  • SVG با DOM (Document Object Model) تعامل دارد و می توان با استایل های css و یا کدهای جاوااسکریپت کار کند.
  • SVG می تواند توسط گوگل ایندکس شود. بدین معنی که اگر متنی داخل فرمت SVG نوشته شود، خزنده های گوگل می توانند این متن را پیمایش و ایندکس کنند.
  • SVG می تواند در هر رزولوشنی چاپ شود.
  • SVG فرمت توصیه شده توسط کنسرسیوم جهانی وب (W3C) می باشد.
  • تمام مرورگرهای مدرن از فرمت SVG پشتیبانی می کنند. اگرچه توسط نسخه های ۸ به قبل مرورگر اینترنت اکسپلورر پشتیبانی نمی شود، توسط پلاگین هایی می توان این مشکل را حل کرد.

 

ایجاد چند شکل توسط SVG:

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

 

ترسیم خط توسط SVG:

بدین منظور کد زیر را در داکیومنت HTML خود وارد کنید.

<svg>

    <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" /></line>

</svg>

روش تعریف تگ SVG بدین صورت است که ابتدا تگ <svg> را تعریف کرده سپس از زبان نشانه گذاری xml برای تعریف شکل دلخواه استفاده می کنیم. در کد فوق پارامترهای زیر را تعریف کرده ایم:

  • x1: مختصات شروع خط روی محور افقی x
  • y1: مختصات شروع خط روی محور عمودی y
  • x2: مختصات پایان خط روی محور افقی x
  • y2: مختصات پایان خط روی محور عمودی y

 

ترسیم خط مورب توسط svg:

Svg فوق یک خط افقی به رنگ مشکی ایجاد می کند. حال اگر بخواهیم یک خط مورب را توسط svg ترسیم کنیم، کافیست مقدار پارامتر y2 را به ۲۰۰ تغییر دهیم. همچنین می توان رنگ این خط را به دو صورت تغییر دهیم، یکی اینکه استایل درون خطی برای آن تعریف کنیم و دیگری اینکه در یک فایل css برای آن استایل موردنظر خود را اعمال کنیم.

 

ترسیم خط توسط SVG

 

کد svg خط مورب بصورت زیر می باشد:

<svg>

    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10" /></line>

</svg>

 

ترسیم دایره توسط SVG:

دایره می تواند همانند خط ترسیم شود با انجام تغییراتی در پارامترهای SVG . در این مثال می خواهیم دایره ای با رنگ داخلی نقره ای و حاشیه مشکی طراحی کنیم که BORDER-RADIUS آن ۵۰ پیکسل است:

 

ترسیم دایره توسط SVG

 

کد svg برای طراحی دایره بصورت زیر است:

<svg>

    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver" />

</svg>

اتریبیوت های CX و CY بیانگر مختصات X و Y وسط دایره می باشند. اگر این پارامترها را تعریف نکنیم، بطور پیش فرض مختصات ۰ برای وسط دایره درنظر گرفته می شود که جالب نمی باشد. پارامتر r نیز مشخص کننده border-radius می باشد.

 

ایجاد مستطیل با SVG:

همانطور که تابحال متوجه شده اید، ایجاد اشکال مختلف هندسی توسط فرمت SVG کار سختی نیست. مستطیل نیز از این قاعده مستثنا نمی باشد.

 

ایجاد مستطیل با SVG

 

کد تگ svg برای ترسیم یک مستطیل بصورت زیر می باشد:

<svg>

    <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5" /></rect>

</svg>

مانند استایل های css برای تعیین ابعاد مستطیل باید از width و height استفاده کنیم.

 

طراحی بیضی بوسیله svg:

بیضی همانند دایره در svg طراحی می شود با این تفاوت که برخلاف دایره که فقط یک border-radius داشتیم، برای طراحی بیضی باید دو border-radius افقی و عمودی تعریف کنیم.

 

طراحی بیضی بوسیله svg

 

کد ترسیم یک بیضی توسط اشکال svg به شکل زیر است:

<svg>

    <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver" /></ellipse>

</svg>

 

ایجاد چندضلعی (polygon) با svg:

طراحی چندضلعی با svg نیاز به کمی ترفند دارد. ابتدا به svg چندضلعی رنگ بک گراند (fill color) سبز و حاشیه زردرنگ ۱۰ پیکسلی می دهیم. سپس اتریبیوت point را برای آن تعریف می کنیم. هر جفت از مختصات نقاط چندضلعی بیانگر مختصات افقی و عمودی گوشه های polygon می باشد. در این مثال ما می خواهیم یک ستاره ایجاد کنیم.

 

ایجاد چندضلعی (polygon) با svg

 

تگ svg برای ایجاد یک چندضلعی به شکل ستاره:

<svg>

        <polygon fill="green" stroke="orange" stroke-width="10" points="350, 75  379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" />

        </polygon>

    </svg>

 

افزودن متن به svg:

همانطور که در ابتدای مقاله عرض کردیم، برای هر svg می توان متنی تعریف کرد که توسط گوگل ایندکس شود. برخلاف تکنولوژی های سابق وب مانند فلش که متن داخل آنها در گوگل ایندکس نمی شد. بدین صورت می توان تکست موردنظر را به فرمت svg اضافه کرد:

<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000;">Mohtava.info</text>

همانطور که در کد فوق مشاهده می کنید مختصات x و y را بهمراه برخی استایل های css (مانند font-size و color و…) را تعریف کرده ایم.

 

ایجاد مسیر (path) توسط svg:

برای طراحی یک مسیر توسط svg باید روی اتریبیوت d تمرکز کنیم. اتریبیوت ‘d’ چگونگی ترسیم مسیر را شرح می دهد. این پارامتر شامل چندین فاکتور مختلف می باشد که عبارتند از:

M: moveto

L: lineto

H: horizontal lineto

V: vertical lineto

C: curveto

S: smooth curveto

Q: quadratic Bezier curve

T: smooth quadratic Bezier curveto

A: elliptical Arc

Z: closepath

 

ایجاد مسیر (path) توسط svg

 

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

    <svg>

        <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path>

    </svg>

مسیری که توسط svg ترسیم شده است این قابلیت را دارد که با یک متن دلخواه پر شود. بصورت تصویر زیر:

 

افزودن متن به مسیر svg

 

کد درج متن روی مسیر ایجاد شده با SVG:

<svg>

        <defs>

            <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>

        </defs>

        <text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">

            <textPath xlink:href="#path1">Mohtava.info</textPath>

        </text>

    </svg>

 

همانطور که در کد بالا مشاهده می کنید، این svg از دو بخش تشکیل شده است. تگ def و تگ text . مشخصات مسیر (path) را در تگ defs تعریف می کنیم و مشخصات متن موردنظر را در تگ text . به تگ path آیدی path1 داده ایم و سپس مقدار اتریبیوت textPath واقع در تگ text را برابر آیدی path1 قرار داده ایم.

 

نحوه طراحی آیکون و لوگو توسط svg:

تا اینجای مقاله، چگونگی ترسیم اشکال مختلف هندسی (خط-دایره-مستطیل و چندضلعی) را توسط svg آموزش داده ایم. اکنون وقت آنست که کمی قضیه را پیچیده تر کنیم و با مباحث چالش انگیز مواجه شویم. البته به لطف نرم افزار قدرتمند Adobe illustrator آنقدرها هم پیچیده نیست. بطور کلی کار این نرم افزار "طراحی وکتورهای مختلف و قابل scale" می باشد.

طراحی لوگو در نرم افزار illustrator:

نرم افزار ایلاستریتور (illustrator) را باز کنید و لوگو یا آیکون دلخواه خود را در آن ترسیم کنید. اگر لوگو بصورت حرفه ای طراحی شده باشد احتمالا با illustrator طراحی شده است. فایل آن را باز کنید و یا اگر به هر دلیلی به فایل ایلاستریتور لوگوی شرکت خود دسترسی ندارید، یک لوگو از ابتدا در این نرم افزار ایجاد کنید. اگر تاکنون با نرم افزار ادوبی ایلاستریتور کار نکرده اید، پیشنهاد می کنیم مجموعه مقالات طراحی گرافیک از وب سایت تاتس‌پلاس (TutsPlus) را مطالعه نمائید.

هنگامی که لوگوی موردنظر خود را با ایلاستریتور باز کردید، به منوی file > save as بروید و مطابق تصویر زیر، آنرا با فرمت .svg ذخیره کنید.

 

نحوه طراحی آیکون و لوگو توسط svg

 

پس از انتخاب فرمت svg با دیالوگ تنظیمات svg مواجه خواهید شد. مانند تصویر زیر، روی دکمه SHOW SVG CODE کلیک کنید.

 

روی دکمه SHOW SVG CODE کلیک کنید

 

با اینکار کد SVG در مرورگر باز خواهد شد. فقط کافیست این کد را کپی کرده و در فایل HTML سایت خود و در محل موردنظر paste کنید. به همین راحتی بدون حتی یک خط کد نوشتن توانستید یک svg طراحی شده در illustrator را در وب سایت خود درج کنید.

طراحی path توسط adobe illustrator:

شما همچنین می توانید از ایلاستریتور برای ایجاد مسیر (path) استفاده کنید. پس از ترسیم مسیر دلخواه خود، کافیست اتریبیوت ‘d’ آنرا کپی کنید و در صفحه وب سایت خود درج کنید (همانطور که قبلا دراین مقاله آموزش داده شده)

بعنوان مثال مسیری که در این مقاله مثال زدیم بنده توسط نرم افزار illustrator طراحی کردم و با مراجعه به کد svg آن و برداشتن اتریبیوت d آن، در وب سایت استفاده کردم و متن دلخواه را روی آن قرار دادم.

استایل دهی به تگ svg توسط css:

شما همچنین می توانید تگ svg را توسط استایل های css شخصی سازی کنید و موقعیت آن را مشخص کنید. علاوه بر این شما می توانید تگ svg را در تگ لینک (anchor tag) قرار دهید تا شکل یا مسیر طراحی شده با svg بصورت لینک درآید. و یا حتی می توان اشکال svg را توسط جی کوئری دستکاری کرد.

با مطالعه مقاله { آموزش تکنیک های CSS } می توانید دانش خود را در زمینه زبان شیوه نامه CSS بالا ببرید

 

نتیجه گیری (Conclusion):

استفاده از فرمت svg این امکان را برای طراحان وب فراهم می کند که اشکال scalable ایجاد کنند که در تمام اسکرین ها و دستگاه های موجود در بازار بخوبی نمایش می یابند و از کیفیت آنها کاسته نخواهد شد. بویژه در این روزها که اسکرین های رتینا (retina screen) در حال گسترش می باشند، استفاده از طراحی svg بسیار کاربردی خواهد بود.

مسلما فرمت svg در تمام موقعیت ها و سناریوها نمی تواند پاسخگوی کار طراحان وب باشد اما برای طراحی اشکال گرافیکی وکتور بسیار سودمند هستند.

 

منبع: https://webdesign.tutsplus.com/articles/getting-started-with-scalable-vector-graphics-svg–webdesign-7515


برچسب‌ها:

استایل دهی svgایجاد path با svgایجاد svgتصاویر وکتوریتصویر svgدرباره svgطراحی pathطراحی svgطراحی چندضلعی با svgطراحی خط با svgطراحی دایره با svgطراحی مستطیل با svgفایل svgفرمت svgمتن در svgویژگی های svg

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شش − 3 =