tamafi6
جمعه 14 شهریور 1393, 15:18 عصر
http://pacifist.xzn.ir/myimages/svg.jpg
SVGمخفف عبارت scalable vector graphic یاهمان تصاویربرداری مقیاس پذیراست SVG یک فرمت فایل خاص است که که به شمااجازه میدهد بااستفاده ازXML تصاویربرداری ایجاد کنید.برتری تصاویربرداری به نسبت تصاویرپیکسلی دراین است که تصاویربرداری درزمانی که بزرگ ویاکوچک شوندهمچنان کیفیت خودراحفظ میکنندبسیاری ازکارهایی که با canvas انجام میگیردبااستفاده ازSVG شدنی است همانند رسم مسیر,شکل,متن,توالی رنگ ویارسم الگو.ابزارهای منبع بازخوبی وجودداردکه میتوان برای رسم شکلها ازآنهااستفاده نمود.
قابلیت پایه ی SVG که همان اضافه کردن آن دربرچسب img در html است توسط این مرورگرهاپشتیبانی میشود:
سفاری 3.2 به بعد
کروم 6 به بعد
فایرفاکس 4 به بعد
اینترنت اکسپلورر9 به بعد
اپرا 10,5 به بعد
برخلاف canvas تصاویری که با SVG ایجادشده باشنددردرخت DOM دردسترس انداین قابلیت به ابزارهای صفحه خوان اجازه میدهدتاازطریق بررسی گره DOM به محتوای آبجکت SVG پی ببردازآنجایی که SVG یک فرمت XML است محتوای آن ازمحتوای canvas برای موتورهای جستجو دردسترس تراست.
رسم شکل با SVG
رسم یک دایره بسیارراحتترازرسم آن درcanvas است ماازاین کدبرای رسم دایره استفاده میکنیم:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
<circle cx="50" cy="50" r="25" fill="red"/>
</svg>
خصیصه viewBox نقطه شروع رسم,عرض وارتفاع تصویرSVG رامشخص میکندبرچسب circle یک دایره راتعریف میکندو cx وcy نیزمختصات مرکزدایره راتعیین میکنند.شعاع دایره نیزبا r مشخص میشودوخصیصه fill هم رنگ تصویرراتعیین میکند.
با SVG میتوان چهارضلعی نیزرسم کردوخطی رادورچهارضلعی ترسیم نموددرست همانطورکه درcanvas این کارراانجام میدادیم.
بگذاریدازقابلیتهای XML درSVG استفاده نماییم وازبرچسب استفاده کنیم که به مااجازه میدهدتاتصویرمان رابه شکل نوشتاری ترسیم نماییم:
<desc>تصاویربرداری مقیاس پذیر</desc>
سپس برچسب rect رابابرخی ازخصیصه هاکه چهارضلعی راتوصیف میکند پرکنیم این خصیصه هاعبارتنداز X و Y برای تعیین مختصات ومحل رسم چهارضلعی ,عرض وارتفاع آن,رنگ داخل چهارضلعی ,خط دوروضخامت آن:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<desc> تصاویربرداری مقیاس پذیر </desc>
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="red" stroke-width="3"/>
</svg>
متاسفانه همیشه کاربه این سادگی نیست اگربخواهیم یک شکل پیچیده ترسیم کنیم کدظاهری شلوغ به خودمیگیردتصویرزیریک نمونه ازاین تصویرمیباشدومقداری ازنمونه کد:
http://pacifist.xzn.ir/myimages/svg.svg
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="125"
height="125"
id="svg3816"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="spinner.svg">
<defs
id="defs3818">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective3824"/>
<inkscape:perspective
id="perspective3765"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d"/>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3731"
id="linearGradient3753"
gradientUnits="userSpaceOnUse"
x1="1475.4565"
y1="1033.0128"
x2="876.95422"
y2="1319.9257"/>
استفاده از Inkscape برای رسم تصاویر SVG
برای صرفه جویی دروقت به جای نوشتن کدبه صورت دستی میتوان ازیک برنامه ی ویرایش تصویرکمک گرفت یکی ازابزارهای رایگان ومنبع بازکه میتوان ازآن استفاده نمود Inkscape است Inkscape برنامه ویرایش تصاویربرداری است که فایلهایی باخروجی SVG تولیدمیکنداین برنامه رامیتوان ازسایتInkscape (http://inkscape.org/)دریافت نمودازاین برنامه علاوه برساخت تصاویربافرمت SVG میتوان بسیاری عملیات دیگرانجام دادازجمله ساخت توالی رنگ وبسیاری اعمال دیگربنابرنیازطراح.
برای رسم نشانگرنمونه دربالا بجای اینکه ازصفرشروع نماییم میتوان ازتصویرمناسب برای شروع استفاده نمود.
فیلترهای SVG
ادامه مطلب (http://pacifist.xzn.ir/html5/-svg/)
SVGمخفف عبارت scalable vector graphic یاهمان تصاویربرداری مقیاس پذیراست SVG یک فرمت فایل خاص است که که به شمااجازه میدهد بااستفاده ازXML تصاویربرداری ایجاد کنید.برتری تصاویربرداری به نسبت تصاویرپیکسلی دراین است که تصاویربرداری درزمانی که بزرگ ویاکوچک شوندهمچنان کیفیت خودراحفظ میکنندبسیاری ازکارهایی که با canvas انجام میگیردبااستفاده ازSVG شدنی است همانند رسم مسیر,شکل,متن,توالی رنگ ویارسم الگو.ابزارهای منبع بازخوبی وجودداردکه میتوان برای رسم شکلها ازآنهااستفاده نمود.
قابلیت پایه ی SVG که همان اضافه کردن آن دربرچسب img در html است توسط این مرورگرهاپشتیبانی میشود:
سفاری 3.2 به بعد
کروم 6 به بعد
فایرفاکس 4 به بعد
اینترنت اکسپلورر9 به بعد
اپرا 10,5 به بعد
برخلاف canvas تصاویری که با SVG ایجادشده باشنددردرخت DOM دردسترس انداین قابلیت به ابزارهای صفحه خوان اجازه میدهدتاازطریق بررسی گره DOM به محتوای آبجکت SVG پی ببردازآنجایی که SVG یک فرمت XML است محتوای آن ازمحتوای canvas برای موتورهای جستجو دردسترس تراست.
رسم شکل با SVG
رسم یک دایره بسیارراحتترازرسم آن درcanvas است ماازاین کدبرای رسم دایره استفاده میکنیم:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
<circle cx="50" cy="50" r="25" fill="red"/>
</svg>
خصیصه viewBox نقطه شروع رسم,عرض وارتفاع تصویرSVG رامشخص میکندبرچسب circle یک دایره راتعریف میکندو cx وcy نیزمختصات مرکزدایره راتعیین میکنند.شعاع دایره نیزبا r مشخص میشودوخصیصه fill هم رنگ تصویرراتعیین میکند.
با SVG میتوان چهارضلعی نیزرسم کردوخطی رادورچهارضلعی ترسیم نموددرست همانطورکه درcanvas این کارراانجام میدادیم.
بگذاریدازقابلیتهای XML درSVG استفاده نماییم وازبرچسب استفاده کنیم که به مااجازه میدهدتاتصویرمان رابه شکل نوشتاری ترسیم نماییم:
<desc>تصاویربرداری مقیاس پذیر</desc>
سپس برچسب rect رابابرخی ازخصیصه هاکه چهارضلعی راتوصیف میکند پرکنیم این خصیصه هاعبارتنداز X و Y برای تعیین مختصات ومحل رسم چهارضلعی ,عرض وارتفاع آن,رنگ داخل چهارضلعی ,خط دوروضخامت آن:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<desc> تصاویربرداری مقیاس پذیر </desc>
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="red" stroke-width="3"/>
</svg>
متاسفانه همیشه کاربه این سادگی نیست اگربخواهیم یک شکل پیچیده ترسیم کنیم کدظاهری شلوغ به خودمیگیردتصویرزیریک نمونه ازاین تصویرمیباشدومقداری ازنمونه کد:
http://pacifist.xzn.ir/myimages/svg.svg
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="125"
height="125"
id="svg3816"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="spinner.svg">
<defs
id="defs3818">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective3824"/>
<inkscape:perspective
id="perspective3765"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d"/>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3731"
id="linearGradient3753"
gradientUnits="userSpaceOnUse"
x1="1475.4565"
y1="1033.0128"
x2="876.95422"
y2="1319.9257"/>
استفاده از Inkscape برای رسم تصاویر SVG
برای صرفه جویی دروقت به جای نوشتن کدبه صورت دستی میتوان ازیک برنامه ی ویرایش تصویرکمک گرفت یکی ازابزارهای رایگان ومنبع بازکه میتوان ازآن استفاده نمود Inkscape است Inkscape برنامه ویرایش تصاویربرداری است که فایلهایی باخروجی SVG تولیدمیکنداین برنامه رامیتوان ازسایتInkscape (http://inkscape.org/)دریافت نمودازاین برنامه علاوه برساخت تصاویربافرمت SVG میتوان بسیاری عملیات دیگرانجام دادازجمله ساخت توالی رنگ وبسیاری اعمال دیگربنابرنیازطراح.
برای رسم نشانگرنمونه دربالا بجای اینکه ازصفرشروع نماییم میتوان ازتصویرمناسب برای شروع استفاده نمود.
فیلترهای SVG
ادامه مطلب (http://pacifist.xzn.ir/html5/-svg/)