گرافیک برداری

SVG یا Scalable Vector Graphics زبانی‌ست از نوع XML که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت به عنوان استانداردی جدید از سوی کنسرسیوم وب W3C ایجاد گردیده است. اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارنده‌ی گرافیک و انیمیشن بر روی وب می‌گردد.

برای نمونه این کد ساده دایره‌ای قرمز ترسیم می‌کند. مشاهده نمونه کدهای بیشتر

شایان ذکر است که SVG ها توسط همه براوزرهای اصلی (بجز IE<=8) پشتیبانی می‌شود. همچنین بد نیست بدانید که آینده گرافیک وب اجبارا به سمت SVG می‌رود چون تنها تصاویر برداری هستند که می‌توانند در صفحه نمایش‌های رتینا و نسل‌های بعد از آن به درستی نمایش داده شوند. (توضیح بیشتر)

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

یکی دیگر از فواید SVG این است که می‌توان با آن انیمیشن ایجاد کرد. مثلا شعاع یک دایره را می‌توان طی یک ثانیه تغییر داد و ... مثلا این کد را ببینید:

<svg height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="150" height="100" fill="blue" />
    <circle r="50" cx="50" cy="50" fill="red" />
    <polygon points="0,0 50,50 100,0" fill="orange" />
</svg>
<script src="jquery.js"></script>
<script>
$(function(){
    var circle = $('svg circle'), radius = 50, svgInterval = setInterval(
    function(){
        radius += 0.2;
        if ( radius > 70 ){
            clearInterval(svgInterval);
            return;
        }
        circle.attr('r', radius);
    }, 55);
});
</script>

(پیش نمایش کد فوق)

به عنوان یک مثال کاربردی می‌توانید این مطلب را ببینید که دموی آن نیز در اینجا قرار گرفته است.
دو مطلب آموزشی دیگر می‌توانید این مطلب کوتاه و این مقاله مفصل را ببینید.

معرفی چند پلاگین کاربردی در مورد SVG ها

LAZY LINE PAINTER
یک پلاگین بسیار عالی برای دادن جلوه انیمیشن به هر فایل SVG (از جمله نمودارها و خصوصا لوگوها).
SVG.JS
یک کتابخانه سبک جاوا اسکریپتی برای راحتی کار با SVG و ایجاد تغییر و انیمیشن در یک فایل SVG
Fabric.js
معمولا کمتر برنامه‌ای هست که هم پیشرفته باشد هم کار با آن ساده باشد اما Fabric.js is اینگونه است! همچنین این برنامه قابلیت‌های بسیاری دارد از جمله ساپورت کردن وسائل لمسی، انیمیشن، تبدیل svg به canvas و برعکس و همچنین تبدیل به جی‌سان (JSON) و بسیاری قابلیت‌های دیکر...
جایگزینی SVG با PNG به وسیله SVGMagic
بسیاری از طراحان در قرارداد خود قید می‌کنند که طرح‌شان در مرورگرهای نوین به صورت صحیح نمایش داده می‌شود نه مرورگرهای قدیمی. لذا مثلا کسی که از IE8 استفاده می‌کند، SVG های شما را نمی‌بیند. با افزودن اسکریپت SVGMagic به صفحه خودتان، در صورت ساپورت نشدن SVG توسط براوزر کاربر، به صورت خودکار SVG های صفحه شما با PNG جایگزین می‌شوند. png هایی که توسط سرور SVGMagic ساخته و سرو می‌شوند.
D3.js
یکی از پیشرفته‌ترین و قدرتمندترین کتابخانه‌های ایجاد تصویر و نمودار انیمیشن با کمک جاوا اسکریپت و svg
Snap.svg
شعار Snap.svg این است که «با svg ها به همان آسانی کار کنید که jQuery با DOM کار می‌کند»!
traceit.js
شاید پیش آمده که بخواهید با کشیدن یک خط به صورت انیمیشن در اثر یک رویداد یا پس از بارگزاری صفحه، توجه کاربر را به بخشی از صفحه جلب کنید. این کار با کمک پلاگین traceit.js بسیار ساده و زیبا قابل انجام است.
Vivus
این کتابخانه js افزودن انیمیشن به SVG را به سادگی آب‌خوردن کرده است.

چگونه SVG را ایجاد و ویرایش کنیم؟

برنامه edge و illustrator دو برنامه تحت سیستم‌عامل عالی و پیشرفته از شرکت Adobe برای ایجاد و ویرایش svg ها می‌باشد که البته رایگان نیستند و اگر دنبال برنامه مجانی برای کار با SVG هستید، برنامه InkScape یک انتخاب عالی‌ست.
ادیتورهای آنلاین javascript ی نیز برای این کار وجود دارد که SVG-edit و DrawSVG و mondrian سه نمونه از آنهاست.
همچنین با کمک سرویس‌های زیر می‌توانید تصاویر ساده خود را به svg تبدیل کنید:

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

چگونه SVG را بهینه‌سازی و سرو کنیم؟

فایل SVG را می‌توان هم به صورت یک فایل با پسوند SVG ذخیره کرد و سپس آدرس آن را درج کنیم:

HTML:
<img src="/image/test.svg">
CSS:
.bg {background: url(/image/test.svg);}

راه دیگر استفاده از آن به صورت inline است:

HTML:
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>
CSS:
.bg {background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');}

برای بهینه‌سازی SVG ها، می‌توانید با کمک ابزار SVGO یا ابزار گرافیکی تحت ویندوز آن، به سادگی SVG های خود را برای این کار بهینه‌سازی کنید و به صورت یک خط درآورید.

دقت کنید که برای استفاده از SVG به حالت inline لازم نیست از base64 استفاده کنید چون هیچ خاصیتی ندارد و صرفا حدود %33 حجم اطلاعات شما اضافه می‌شود که در این مقاله توضیح داده شده است.

در این مقاله جدید نیز نکاتی عالی در مورد روش استفاده صحیح و بهینه از SVG ذکر شده است.

SVG Sprite

CSS Sprite موجب کاهش تعداد درخواست می‌شود. اما اگر بجای تصویر از SVG استفاده کنیم چطور؟!
برای این منظور کافی است SVG های موردنظر را در یک تگ G (گروپ) با id تعریف کنید و سپس آن‌ها را در تگ defs قرار دهید تا رندر نشود. همچنین تگ SVG دربرگیرنده آن را طوری تنظیم کنید که هیچ خروجی نداشته باشد:

<svg width="0" height="0" class="hide">
  <defs>
    <g id="icon-twitter">
      <path d="">
    </g>
    <g id="icon-codepen">
      <path d="">
      <path d="">
    </g>
  </defs>
</svg>

حال هرجای صفحه که نیاز داشتید از یکی از آیکون‌های فوق استفاده کنید، کافیست اینگونه بنویسید:

<svg class="icon icon-twitter" viewBox="0 0 100 100">
  <title>@CoolCompany on Twitter</title>
  <use xlink:href="#icon-twitter" />
</svg>

بجای تگ g می‌توان از تگ symbol استفاده کرد. با این کار، می‌توان خصیصه‌ی viewBox و تگ title را به قسمت تعریف SVG منتقل کرد.

سایر کاربردها و فواید SVG

علاوه بر فواید برداری بودن تصویر و انیمیشن، کاربردها و فواید دیگری هم برای SVG وجود دارد. یکی از این کاربردهای شایع، ایجاد ماسک شفاف (transparent) برای تصویر jpg است. توضیح بیشتر آنکه؛
گاهی شما می‌خواهید بخشی از یک عکس ترنسپرنت باشد (مثلا به این دلیل که بکگراند اصلی سایت در اطرافش به خوبی نمایش داده شود). در این حالت مجبور هستید فرمت PNG را برای تصویر خود انتخاب کنید. اما این کار (خصوصا در مورد تصاویر با کیفیت بالا) موجب افزایش قابل‌ملاحظه‌ی حجم عکس می‌شود مثلا عکسی که می‌توانست با فرمت jpg با حجم 100 کیلوبایت به بهترین کیفیت نمایش داده شود، تبدیل به یک عکس PNG با حجم 1 مگابایت می‌شود!
برای رفع این مشکل می‌توان بهترین راهی که وجود دارد استفاده از ماسک png درون svg است که به خوبی در این مقاله توضیح داده شده است و سرویس آنلاین ZorroSVG هم در این خصوص به شما کمک خواهد کرد.

منابعی برای مطالعه بیشتر

SVG مبحث نسبت جدید و تخصصی است و کمتر کسی به صورت عمیق به آن وارد شده است. اما خانم sara soueidan که یک زن مسلمان محجبه لبنانی است، در وبلاگش مطالب بسیار تخصصی و نابی در این خصوص نوشته است مثل این مطلب:
Understanding SVG Coordinate Systems & Transformations
همچنین مقاله جدید و جذاب Styling And Animating SVGs With CSS از ایشان در Smashing Magazine نیز خواندنی است.
آقای Willian Justen نیز در این مخزن خود در سایت گیت هاب، مجموعه بزرگ و ارزشمندی از لینک‌های مربوط به SVG را گردآوری کرده است. در این صفحه نیز لیست خوبی فراهم شده است.
خبرگزاری SVG هم آمد!
در این سایت خبری به آدرس svg-news.com می‌توانید جدیدترین اخبار در مورد SVG را مطالعه کنید.
svg on the web
در این سایت به صورت ساده مبانی SVG توضیح داده شده است...

یادداشت‌های مرتبط

علیرضا معظمی

مشاوره و اجرای پروژه‌های خاص طراحی و برنامه‌نویسی وب

یادداشت‌ها

گرافیک برداری

معرفی چند پلاگین کاربردی در مورد SVG ها

چگونه SVG را ایجاد و ویرایش کنیم؟

چگونه SVG را بهینه‌سازی و سرو کنیم؟

SVG Sprite

سایر کاربردها و فواید SVG

منابعی برای مطالعه بیشتر

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: