سبد خریدتان در حال حاضر خالی است!
آشنایی با SVG
18 امتیاز 
Loading…SVG چیست؟
به معنی گرافیک برداری مقیاس‌پذیر می‌باشد که مخفف کلمه Scalable Vector Graphics می‌باشد. برای گرافیک‌های دوبعدی استفاده می‌شود. ازنظر کیفیت بسیار عالی هستند که با ZOOM روی گرافیک کیفیت آن تغییری نمی‌کند چون‌که تصاویر SVG وکتور و برداری هستند و حجم این فایلها از فرمت‌های پیکسلی کم‌تر است، چون فایل‌های SVG کاملاً XML هستند.
پشتیبانی مرورگرها
- مرورگر chrome : نسخه 4.0
- مرورگر FireFox : ورژن0
- مرورگر internet Explorer : ورژن0
- مرورگر Opera : نسخه 0
- مرورگر safari : نسخه 3.2
رسم دایره در SVG
ما میتوانیو با SVG اشکال متفاوتی را رسم کنیم ولی من فقط رسم دایره را برای شما توضیح می‌دهم، بقیه اشکال را در زیر معرفی خواهم کرد. رسم دایره در SVG با استفاده از عنصر <circle>. از عنصر <circle> برای ایجاد یک دایره استفاده می‌شود.
در زیر کد SVG دایره‌ی بالا را در قالب یک مثال مشاهده می‌کنید:
<html>
<head>
</head>
<body>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>
</html>
توضیحات کد بالا:
- برای رسم دایره به کد SVG خود یک طول و عرض مشخصی می‌دهیم.
- خصوصیات cx و cy به ترتیب، مختصات x و y از مرکز دایره را مشخص می‌کنند. درصورتی‌که cx و cy مشخص نشوند، مرکز دایره به مختصات (0,0) در نظر گرفته خواهد شد.
- خصوصیت r، شعاع دایره را مشخص می‌کند.
اَشکال SVG
SVG شامل تعدادی شکل از پیش تعریف‌شده است که می‌توانند توسط برنامه نویسان مورداستفاده قرار بگیرند:
<rect> مستطیل
<circle> دایره
<ellipse> بیضی
<line> خط
<polyline> چندخطی
<polygon> چندضلعی
<path> مسیر
نکته‌ای باید در اینجا بیان کرد این است که می‌توان از عنصر path برای رسم یک مسیر و شکل خاص استفاده کرد:
برای ایجاد یک رسم در SVG، از دستورات خلاصه‌ی زیر استفاده می‌شود:
M = برو به یک نقطه
L = خط رسم کن تا این نقطه
H = خط افقی رسم کن تا این نقطه
V = خط عمودی رسم کن تا این نقطه
C = رسم منحنی تا این نقطه
S = رسم منحنی صاف تا این نقطه
Q = رسم منحنی درجه 2
T = رسم منحنی درجه 2 صاف
A = کمان بیضوی
Z = بستن رسم
<html>
<head>
</head>
<body>
<svg height="210" width="400">
<path fill="#660066" d="M70 0 L170 0 L250 200 L0 200 Z " />
</svg>
</body>
</html>در کد بالا یک‌چند ضلعی را رسم کردیم.
SVG تعداد زیادی خصوصیت را برای ایجاد شیوه‌های رسم مختلف، ارائه می‌دهد. ازجمله :
- خصوصیت stroke درواقع رنگ یک خط یا متن یا کادر دور عناصر را مشخص می‌کند.
- خصوصیت stroke-width ضخامت یک خط یا کادر دور عناصر را مشخص می‌کند.
- خصوصیت stroke-linecap باعث می‌شود تا برای یک رسم بازشده، حالت ابتدا یا انتهای آن رسم را مشخص کنیم.
- از خصوصیت stroke-dasharray برای ایجاد خط‌ها به‌صورت فاصله‌دار، استفاده می‌شود.
تمامی خصوصیات شیوه‌ی رسم می‌توانند به هر نوع خط، یا متن یا خطوط دور عناصری همچون دایره، اضافه شوند.
ایجاد عکس‌های SVG
عکس‌های SVG می‌توانند به‌وسیله‌ی هر ادیتور متنی ایجاد شوند؛ اما این راحت‌تر است که برای ایجاد عکس‌های SVG از یک نرم‌افزار ترسیم‌کننده استفاده کنیم.
قرار دادن تصاویر SVG در Html به کمک تگ <img>
اگر تصویر SVG تون رو به‌عنوان یک فایل ذخیره کنید می‌توانید مستقیماً توسط تگ <img> آن را در سایتتان قرار بدید. کافیه کد زیر رو در کدهای html سایتتان قرار بدید:
<html>
<head>
</head>
<body>
<img src="نام عکس.svg" alt="Image Description">
</body>
</html>برای توضیحات بیشتر و آشنایی با نحوه ایجاد فونت های اختصاصی اینجا کلیک کنید.
Graphic HTML5 SVG Scalable Vector Graphic SVG svg animation svg sprite آشنایی با فرمت SVG اس وی جی تصاویر برداری طراحی سایت طراحی وب عکس لودینگ فرمت SVG لودینگ لودینگ SVG
دیدگاه‌ها
4 پاسخ به “آشنایی با SVG”
سلام و احترام
در خصوص قالب فروشگاهی سوالاتی داشتم. بخش پشتیبانی و تیکت غیر فعاله!
آیا افزونه های مهم ، زرین پال ، کامپوزر، سئو یواست، و … پشتیبانی میکنه؟
برای محافظت از فایل های قابل فروش امنیتش چطوری ایجاد میشه؟
پشتیبانی چطوری انجام میشه در صورت خرید نسخه کامل؟
ای کاش بخش وبلاگی هم داشت.
سپاس از شما .علیکم السلام.
پشتیبانی و تیکت فعاله:
https://wd7.ir/support
این افزونه ها کلیه و روی هر قالبی کار میکنه.غیر از کامپوزر.
برای بحث دانلود از افزونه EDD استفاده شده که اگر طبق روال خودش کار کنین امنیت فایلها اکیه.
پشتیبانی تو قسمت تیکت در خدمتیم.
مورد وبلاگی رو تو قسمت تیکت اعلام کنید برای نسخه های بعدی مدنظر باشه.
سلام و احترام خدمت شما بزرگوار
سپاس از پاسخ شما . چندمین بار به سایت شما میام ولی باز هم تیکت فعال نیست . فک کنم دو حساب در سایت شما ایجاد کردم ولی صفحه تیکت نمیاد و هر بار از منوی بالا بر روی تب تیکت کلیک میکنم صفحه ثبت نام ظاهر میشه.ظمنا مطالب سایت wd7.ir منحصر بفرده موفق و سربلند بمانید.
سلام.
زنده باشید.در دست بررسیه مشکل.
اگر مساله ای در مورد قالب ها هست زیر عنوان خودش میتونین کامنت بذارین.
ممنون بخاطر نظر لطفتون.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.