طراحی سایت با استفاده از تکنیکهای متعددی قابل انجام است. تکنیک SVG که مخفف Scalable Vector Graphics می باشد، یکی از تکنیکهای کاربردی طراحی وب به شمار می رود. SVG یک فایل مبتنی بر xml هست که برای پویا سازی صفحات و انیمیشن سازی در طراحی های دو بعدی مورد استفاده قرار می گیرد. البته svg بیشتر برای مواردی مثل نمودارها، انیمیشنها و تصاویر به کار می رود اما میتوان از آن برای طراحی صفحات وب نیز بهره گرفت.

تصاویر و عملکردهای SVG ها در فایل های متنی نوشته می شوند و این دقیقاً یعنی قابل ایندکس و سرچ شدن هست اما مشکل بزرگ در این مورد این است که مرورگرهایی مثل ie6 تا ie8 نمیتوانند svg را ساپورت کنند و در نتیجه سایتهایی که با استفاده از این تکنیک طراحی شده اند، در نمایش به مشکل میخورند. البته ناگفته نماند که اکثر مرورگرها از پایه های SVG یعنی فونت ها، تصاویر و المان های گرافیکی مثل دایره و خطوط و همچنین گردینت ها پشتیبانی میکنند و تنها مشکل در مورد همین اینترنت اکسپلورر دوست داشتنی! است که همیشه کار طراحی سایت سازگار با مرورگرها را با مشکل مواجه می کرده است و ظاهراً قصد دارد همچنان به کار خود ادامه دهد!

مهم ترین دلیل استفاده از SVG

برای استفاده از SVG در طراحی سایت و صفحات وب دلایل زیادی می توان آورد اما مهم ترین دلیل استفاده از آن قابلیت تنظیم ابعاد آن است. این ویژگی وقتی به کار می آید که کاربرانی با سایزهای مختلف صفحه نمایش داریم. در این موارد، اگر از عکس های معمولی استفاده کنیم، معمولاً تغییر سایز عکسها متناسب با سایز نمایشگر، نتیجه مطلوبی نخواهد داشت اما با SVG این کار به بهترین شکل ممکن انجام پذیر است.

البته در کنار این قابلیت تغییر سایز باید به صرفه جویی در پهنای باند هم اشاره کرد. هر عکس مقداری از پهنای باند شما را مصرف خواهد نمود حال آنکه با SVG تنها یک فایل XML بارگذاری می شود که در آن حجم و ابعاد تصویر هیچ اهمیتی ندارد لذا پهنای باند کمتری مصرف خواهد شد هم روی سرور شما (که اگر هاست نامحدود داشته باشید، فاقد اهمیت است) و هم پهنای باند مصرفی کاربر.

البته در کنار مزایای SVG برای طراحی های زیبا و سبک، نباید فراموش کرد که SVG جایگزینی برای تصاویر پیچیده نیست. در این حالت اگر بخواهیم تصاویر پیچیده و افکتهای گرافیکی پیشرفته را با SVG اجرا کنیم، تنها شاهد احتمالاً کرش کردن مرورگر و کامپیوتر کاربر خواهیم بود! پس استفاده از این تکنیک در تمام پروژه های طراحی سایت به هیچ وجه توصیه نمیشود… .

دو روش برای استفاده از svg در طراحی سایت

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

۱. استفاده از عنصر <object> و لینک دادن به یک فایل svg خارجی:

این روش معمول ترین روش استفاده از svg در صفحات html به شمار می رود.

<object type=”image/svg+xml”

width=”100″ height=”100″ style=”float:right”

data=”http://blog.codedread.com/clipart/apple.svgz”>

<span/></object>

نمونه ای از روش فوق را در اینجا ببینید.

با گسترش استفاده از html5، مرورگرهای بیشتری از svg که در داخل فایلهای html جای گرفته اند، پشتیبانی خواهند کرد.

البته مشکل استفاده از عنصر object برای نمایش svg این است که پوشش دادن کل بک گراند با استفاده از آن مقدور نیست چرا که مثلاً مرورگر safari آن را ساپورت نمیکند.

۲. استفاده از CSS:

با این روش خواهید توانست که فایل SVG را به جای یک تصویر jpeg یا png در backgroung-image بکار بگیرید:

body {

background-image: url(redcircle.svg);

}

این صفحه نحوه استفاده از css برای نمایش SVG در بک گراند را نمایش میدهد.

استفاده از SVG در طراحی سایت از کارهایی است که از سال ۱۹۹۹ انجام می پذیرد. اما در همه گیر شدن این تکنیک هم سدی بزرگ به نام اینترنت اکسپلورر وجود دارد که دردسر ساز شده و البته از ie9 به بعد تا حدی این مشکلات حل شده است و میتوان با خیالی راحت تر نسبت به اجرای آن اقدام نمود.

منابع مورد استفاده در نوشتن این مطلب عبارتند از: ۱ و ۲ و ۳ و ۴

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