شاید تا حالا کلمه svg به گوشتون خورده باشه یا حداقل توی مصاحبه های شغلی ازتون پرسیده شده که کار کردن با اون رو بلدید یا نه. اگر هم طراح گرافیک باشید حتما باهاش برخورد داشتید.در این مقاله می خواهیم Svg و نحوه استفاده از آن در وب رو با هم بررسی کنیم. Svg مخفف  scalable vector graphics  و به معنی گرافیک برداری مقیاس پذیر هست. در حقیقت با استفاده از svg می تونید از بردارها در محیط وب استفاده کنید. حتما براتون این سوال پیش اومده که کلیت قضیه به چه دردی می خوره. ببینید svg یک نوع فرمت گرافیکی هست که حجم بسیار پایین و در مقابل به دلیل خاصیت برداری بودنش کیفیت بالایی داره. در حقیقت چون با یک رزولوشن محدود مانند فرمت png یا jpg مواجه نیستید، سایز تصویر به هر میزانی که نیاز داشته باشید میتونه تغییر اندازه داده بشه و ذره ای از کیفیتش کم نشه.

ویژگی دیگه ای که حداقل توی طرح های جدید بهش نیاز هست، بحث انیمیت کردن و متحرک سازی المان های مختلف در صفحه ست، که فرمت Svg این امکان رو به ما میده که تمام قسمت های یک تصویر، به دلیل وکتور بودن به صورت جداگونه انیمیشن داشته باشند. بسیاری از انیمیشن های تحت وبی که میبینید همگی از svg ساخته شده اند.

فرمت svg در حقیقت طرح گرافیکی رو به صورت xml درمیاره که برای مرورگر فرمت استاندارده و به راحتی اون رو پردازش می کنه. این نکته رو فراموش نکنید که این فرمت ، فرمت مورد تایید و پیشنهاد کنسرسیوم وب هست.

به دلیل اینکه svg به صورت متنی پردازش می شه، میتونید اون رو توی هر نوع ادیتوری تولید کنید ، ضمن اینکه در illustrator هم فرمت خروجی Svg رو میتونید داشته باشید. اگر با هیچ کدوم از این روش ها راحت نیستید، میتونید از inkscape برای تولید svg استفاده کنید.

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

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

دایره:

قطعه کد زیر برای ساخت دایره، در یک صفحه html به کار میره:


<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="black" /> </svg>

بیاید تمام قسمت های این کد رو بررسی کنیم. اولین کار استفاده از تگ svg است. ابتدا ابعاد المان خودتون رو مشخص کنید که در اینجا ۱۰۰ در ۱۰۰ هست و شکل مورد نظرتون نمی تونه از ابعادی که شما مشخص می کنید بزرگتر باشه. در داخل این تگ نوع شکل هندسی رو مشخص می کنیم که در اینجا circle هست. Attribute های cx  و cy مرکز دایره را مشخص می کنند که در اینجا x,y 50 و ۵۰ هستند.

دقت کنید مبدا مختصات در اینجا، برخلاف مبدا مختصات عمومی ریاضیات، از بالاو سمت چپ شروع میشه و محور افقی به سمت راست x و محور عمودی به سمت پایین y رو تشکیل میده.

در ادامه r هم شعاع دایره رو نشان می ده که در اینجا ۴۰ انتخاب شده.

Stroke در Svg به خط دور شکل گفته می شه (مثل border) . stroke-width هم عرض خط دورشکل هستش. مقدار fill رنگ داخل شکل رو مشخص می کنه.

 

مستطیل:

برای ساخت مستطیل کد زیر رو بنویسید:


<svg width="400" height="110"> <rect width="300" height="100" stroke="blue" stroke-width="4" fill="black" /> </svg>

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

 

بیضی:

پیاده سازی بیضی با svg مثل دایره ست و تفاوت اون در شعاع شکل هست. در دایره یک شعاع داریم ولی در بیضی باید دو شعاع طولی و عرضی رو مشخص کنیم.
(در ضمن استایل شکل رو، هم به صورت attribute، مانند مثال های قبل میتونید اعمال کنید و هم به صورت inline-style مانند مثال بعدی:)


<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg>

خط:

برای خط باید مختصات x,y ابتدا و مختصات x,y انتها را بر اساس عرض و ارتفاعی که در svg مشخص کردید، معین کنید:


<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>

تا اینجا پیاده سازی اشکال ساده با استفاده از HTML5 SVG رو دیدیم. در ادامه چند وجهی ها و چالش هایی که در مرورگرهای مختلف باهاش مواجه هستید رو با هم بررسی می کنیم.