خانه > آموزش > رسم تصاویر گرافیکی برداری مقیاسپذیر در صفحه

رسم تصاویر گرافیکی برداری مقیاسپذیر در صفحه

۱۵ بهمن ۱۳۸۸
دیدگاه های این نوشته دیدگاهتان را بنویسید

سلام

تا حالا به این فکر کرده اید که میشه مثلا یه تصویر توی وب سایتتون نقاشی کنید و خروجی ازش بگیرید اونم به صورت برداری؟

چند روز پیش سر پروژه ای که توی شرکت داریم انجام میدیم رئیس برای رسم نمودار ساختار کد نویسی از براساس XML بهم نشون داد که یه جورایی کفم برید :D

اسم این ساختار SVG هست که مخفف Scalable Vector Graphics هست.

با استفاده از این ساختار کد نویسی میتونید به راحتی اشیاعی رو که میخواین با استفاده از تگ های مخصوص خودشون و البته پارامترهایی که میگیرن مشخص کنید.

از نظر سازگاری و پردازش مرورگر های اینترنت برای نمایش بردار رسم شده، تمام مرورگر ها به جز Microsoft Internet Explorer احمق نمیتونه نمایشش بده!!(البته IE8 گویا ساپورت میکنه)

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

ساختار کد نویسیتون باید به صورت زیر باشه:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<!--Code-->

</svg>

بعد از نوشته شما باید کد اشیائی که میخواهید در صفحه‌تون نمایش بده رو قرار بدید.
به صورت مثال کد زیر برای یک مستطیل هست که شفافیتش کمه و لبه هاش گرده:
width="400" height="300">
width="400" height="300" />

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250" height="100"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>

</svg>

حالا یه کم پیشرفته ترش میکنیم و میشه چنتا بیزی بعد گرفته روی هم شده:
width="400" height="300">
width="400" height="300" />

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>

</svg>

و اما پیشرفته تر از اینا نقاشی یه شیر:
[کد این نقاشی رو توی این لینک ببینید]

برای نمایش کد SVG در صفحه وبتون میتونید از تگ های object و embed استفاده کنید، به صورت زیر:

<object data="sample.svgz" type="image/svg+xml"
        width="400" height="300">
    <embed src="sample.svgz" type="image/svg+xml"
            width="400" height="300" />
</object>

<embed src="MyFile.svg" width="40" height="60"
        pluginspage="http://www.adobe.com/svg/viewer/install/" />

شما میتونید تصویرتون رو حتی متحرک هم بکنید که توی پست های بعدی بهتون میگم ;)

برای رسم یک تصویر و دیدن کد اون میتونید add-on فایرفاکسی که برای اون نوشته شده رو نصب کنید.
اسم این افزونه svg-edit هست.

امید پیله ور آموزش , , , , , ,