host3nter

حرفه ای: همه چیزدرمورد SVG (آموزش)

SVGمخفف عبارت scalable vector graphic یاهمان تصاویربرداری مقیاس پذیراست SVG یک فرمت فایل خاص است ...

موضوع حرفه ای: همه چیزدرمورد SVG (آموزش),.

برنامه نویس, برنامه نویسی, طراحی وب (Web Design)

تاريخ ارسال:2014/09/05

هاست سنتر 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 است ماازاین کدبرای رسم دایره استفاده میکنیم: کد HTML: <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 استفاده نماییم وازبرچسب استفاده کنیم که به مااجازه میدهدتاتصویرمان رابه شکل نوشتاری ترسیم نماییم: کد HTML: <desc>تصاویربرداری مقیاس پذیر</desc> سپس برچسب rect رابابرخی ازخصیصه هاکه چهارضلعی راتوصیف میکند پرکنیم این خصیصه هاعبارتنداز X و Y برای تعیین مختصات ومحل رسم چهارضلعی ,عرض وارتفاع آن,رنگ داخل چهارضلعی ,خط دوروضخامت آن: کد HTML: <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> متاسفانه همیشه کاربه این سادگی نیست اگربخواهیم یک شکل پیچیده ترسیم کنیم کدظاهری شلوغ به خودمیگیردتصویرزیریک نمونه ازاین تصویرمیباشدومقداری ازنمونه کد: کد HTML: <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دریافت نمودازاین برنامه علاوه برساخت تصاویربافرمت SVG میتوان بسیاری عملیات دیگرانجام دادازجمله ساخت توالی رنگ وبسیاری اعمال دیگربنابرنیازطراح. برای رسم نشانگرنمونه دربالا بجای اینکه ازصفرشروع نماییم میتوان ازتصویرمناسب برای شروع استفاده نمود. فیلترهای SVG ادامه مطلب هاست,دامین,سایت,وب,طراحی

سوال: دستوری بجای ReadLn در شبکه ایندی که بجای لاین با دریافت کلمه پایان پذیرد

نصب خودکار برنامه های جانبی

گذاشتن طرح توی themeforest.net / کسی اطلاعی داره مارو مطلع کنه لطفا

سوال: سخت تر کردن امکان خواندن کدهای سایت

سوال: ساخت elearning

بازدید ساز سئومارک

فازی c-mean

حرفه, ای:, همه, چیزدرمورد, SVG, آموزش

حرفه ای: همه چیزدرمورد SVG (آموزش)

میزبانی وب ,هاست,فضای وب,ویندوز,لینوکس,دات نت,پی اچ پی,web hosting,windows host,linux host,asp.net,php,sql server,mysql میزبان پایتخت ارائه دهنده خدمات میزبانی وب، هاست و هاستینگ، میزبانی هاست، دامین، میزبانی نمایندگی، نمایندگی وب، سرور مجازی و سرور مجازی ابری می باشد.هاست,میزبانی وب,دامین,سرور مجازی,میزبان پایتخت,host,domain,vps,mizban paytakht,hosting,share hosting,میزبان وب,میزبانی هاست,هاستینگ

google
logo-samandehi