منظور از SVG چیست؟ چگونه میتوانیم تصاویر برداری مقیاس پذیر ایجاد کنیم؟ چگونه تگ <svg> را یاد بگیریم؟ SVG چیه؟ در این مقاله میخواهیم در رابطه با تگ <svg> صحبت کنیم.
سرفصلهای پست
SVG در html چیست؟
- SVG معادل scalable vector graphics به معنای تصاویر برداری مقیاس پذیر است.
- این عنصر یا تگ برای تعریف گرافیک در وب استفاده می شود.
- همچنین SVG توسط w3c توصیه شده است.
عنصر یا تگ SVG در html
عنصر یا تگ <svg> یک عنصر نگهدارنده برای گرافیک برداری است. تگ <svg> چندین متد برای رسم مسیر ها، جعبه ها، دایره ها، متون و تصاویر گرافیکی دارد.
البته ما میتوانیم از تصاویر خروجی گرفته شده نیز که در اینترنت موجود است استفاده کنیم. خب بریم در آخرین مقاله از فصل آشنایی با گرافیک در HTML با چند مثال بیشتر با SVG آشنا بشیم.
رسم دایره
در این قسمت با استفاده از تگ <svg> یک دایره رسم میکنیم که یک پسزمینه زرد دارد و حاشیه ۴ پیکسلی سبز رنگ دارد.
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
رسم مستطیل
در مثال زیر با استفاده از تگ <svg> یک مستطیل رسم میکنیم که پس زمینه آبی و حاشیه ۱۰ پیکسلی مشکی رنگ دارد.
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>
رسم مربع گوشه خمیده
در مثال زیر با استفاده از تگ <svg> یک مربع گوشه خمیده ایجاد کردیم. برای پیاده سازی این مربع از استایل های CSS استفاده کردیم.
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
رسم ستاره
برای ایجاد اجزاء Polygon استایل مثل ستاره، از تگ <polygon> داخل تگ <svg> استفاده میکنیم. مانند مثال زیر که یک ستاره سبز رنگ با حاشیه بنفش رنگ ایجاد کرده ایم.
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
رسم لوگو
از <svg> برای رسم لوگو ها نیز میتوانیم استفاده کنیم. برای مثال در مثال زیر با استفاده از گرادینت ها و نوشتار یک لوگو ساده با عنوان Mizfa ایجاد کرده ایم.
<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="40" y="86">Mizfa</text> Sorry, your browser does not support inline SVG. </svg>
تفاوت بین SVG و Canvas
SVG در حقیقت یک زبان برای تعریف گرافیک دو بعدی در xml است. Canvas گرافیک دو بعدی رسم می کند اما توسط جاوا اسکریپت.
تگ <svg> برپایه xml کار می کند، این مسئله باعث می شود هر عنصر داخل <svg> در dom قابل دسترس باشد. شما می توانید یک event جاوا اسکریپت را برای هر عنصر داخل آن تعریف کنید.
در تگ <svg>، هر شکل به عنوان یک شی در نظر گرفته می شود. اگر خواص یک شی موجود در svg تغییر کند، مرورگر به صورت خودکار آن رسم شکل را به روز می کند.
Canvas به صورت پیکسل به پیکسل رسم می کند. در canvas پس از رسم گرافیک مرورگر دیگر محتوای داخل canvas را به روز نمی کند. اگر قرار به تغییر موقعیت عنصر canvas باشد باید کل صحنه آن دوباره رسم شود، که این شامل هر شی که داخل آن است نیز می شود.
یک مقاله در رابطه با آشنایی با Canvas در پایگاه دانش میزفا موجود هست که میتونید آن را بخوانید.
مقایسه Canvas و SVG
در اینجا به شرح مهم ترین تفاوت های svg و canvas می پردازیم.
| canvas | <svg> |
| وابسته به رزولیشن | غیر وابسته به resolution |
| هیچ پشتیبانی بر روی رویداد ها ندارد | پشتیبانی بر روی روایداد ها |
| سازگاری پایین در رسم متون | مناسب برای اپلیکیش های مقیاس بزرگ مانند گوگل مپ |
| می توانید نتیجه را به صورت png یا jpg ذخیره کنید | رسم کند در استفاده های پیچیده(هر چیزی که به دفعات زیاد از dom استفاده کند آهسته می شود). |
| مناسب برای بازی های گرافیک محور | برای بازی مناسب نیست |
پایان ترم
[box type=”info” class=”question-from-users” width=””]یک دایره قرمز با حاشیه سبز با استفاده از SVG ایجاد کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله از سری مقالات آموزش متن محور HTML با تگ SVG آشنا شدیم، مثال هایی از آن زدیم و تفاوتهای آن را با Canvas مورد بررسی قرار دادیم. امیدوارم استفاده لازم را از محتوای این مقاله برده باشید و به خوبی آموزش گرافیک در HTML را آموخته باشید. اگر سوال پیشنهاد یا انتقادی داشتید حتما آن را با من در میان بگذارید.
تا مقاله بعدی ….
20 پاسخ
جواب سوال:
پاسخ سوال :
سلام محمد، درسته.
سلام. سوال من اینه که آدم بخواد ی چیزی درست کنه position نقطه ها رو پیدا کردن سخته
برنامه ای چیزی نیست ؟؟
سلام امیر، اگر یه تصویر داری و میخواهی داخلش یه بخشی رو پیدا کنی پوزیشنش رو یه ابزار هست به نام ، SVG Sprite Position Finder Tool لینکشم کردم. یه نگاه بهش بنداز.
سلام و خسته نباشید من تو کد های html یه سایت دیدم که یه لوکوی کوچیک و زیبارو با استفاده از تگ svg ساخته بودن و لوگورو تبدیل کرده بودن به مختصات بعد وارد html کرده بودن نه اینکه مثلا با یه نرم افزار طرایحی مرده باشن و لینکش کرده باشن به صفحه من سوالم اینجاست که چطور میتونم یه لوگو یا شکل خاص رو تبدیل به این مختصات کنم ، ممنون میشم که راهنمایی کنید دوستان
سلام
لوگو رو با svg ساخته و به جای اینکه ادرس svg رو بده اومده کدهای داخل svg داخل html گذاشته.
من نصف کد ها مخصوصا تو بخش پالی لاین و لوگو رو متوجه نشدم!
با CSS هستن مواردی مثل گرادینت ها؟
سلام حمید رضا ، بله با CSS هستند ، یک مقدار این بخش پیشرفته هست و پیشنهاد میکنم، بعد از یادگیری CSS دوباره بهش سر بزنی و بررسیش کنی، الان یک مقدار گیج کننده هست ولی باز اگر سوالی بود بگو من توضیح میدم بهت. موفق باشی.
سلام
خیلی ممنون از توضیحات مخصوصا مثالهاتون واقعا خوب بودن
سوالم اینه که چرا با وجود نرم افزارهایی نظیر ایلاستریتور که میشه به راحتی با اونها تصویرهای برداری رو ایجاد کرد تگ SVG در HTML تعریف شده؟
یعنی منظورم اینه که خوب ترجیح با کدومه؟ یعنی من مثلا لوگوم رو با ایلاستریتور طراحی کنم و با پسوند PNG مثلا از طریق تگ img مثلا اونرو فراخوانی کنم یا اینکه کلا اون لوگو رو با svg بنویسم و طراحی کنم و در سایتم استفاده کنم؟
تفاوت این دو در چیه؟
ممنونم 🙂
سلام مونا ،
چقدر سوال خوبی پرسیدی ممنون ازت.
شما با معرفی کردن SVG های طراحی شده توسط نرم افزار های گرافیکی مثل همین نرم افزار Adobe Illustrator که مثال زدی دقیقا همون بردار هایی که با کد های HTML میتونی بکشی رو خیلی راحت تر پیاده سازی میکنی ولی خب یک مسئله ای که وجود داره اینه که نمیتونی خیلی شخصی سازیش بکنی و این تگ SVG و ساختار Canvas این امکان شخصی سازی رو بهت میده. حالا تفاوت SVG و PNG تو چیه؟ تصاویر SVG به علت اینکه برداری هستند ممکنه مثلا شما یک تصویر SVG رو با سایز ۱۰۰ پیکسل با حجم ۱۰ کیلوبایت آپلود بکنید و موقع استفاده اون تصویر رو در اندازه ۱۰ یا ۲۰ برابر استفاده کنید و روی حجم و کیفیت تاثیری نداره ولی شما تصویر PNG رو ممکنه با همون ۱۰ کیلوبایت خروجی بگیرید ولی موقع استفاده ۱۰ یا ۲۰ برابر کیفیت نابود میشه و اگر بخواین از تصویری بزرگتر استفاده کنید حجم بسیاری ازتون میگیره. به جهت بهینه سازی و حفظ کیفیت میگن از SVG استفاده کنید.
موفق باشی.
سلام استاد
خیلی ممنونم واقعا قبل از پاسخ شما داشتم سر سری از این تگ میگذشتم ولی الان کاملا متوجه اهمیتش شدم
استاد من در اینترنت که گشتم متوجه شدم سایتهایی وجود دارن که میشه تو یه محیط ساده فق اشکال رو ترسیم کرد و نهایت از اونها کد نهایی رو تحویل گرفت و در پیج استفاده کرد
به نظر شما این روش بهتره یا اینکه بشینم تمرین کنم کار با این تگ رو کامل یاد بگیرم تا با دستورات اشکال مورد نظرم رو ترسیم کنم؟ آیا این سایتها بدون نقص و درست هستن و استفاده از اونها مشکلی پیش نمیاره؟
ممنونم
سلام مونا عزیز، خواهش میکنم،
همونطور که گفتم کمی توی شخصی سازیش مثل تغییر رنگ ممکنه به مشکل بخوری در آینده ولی به نظرم استفاده ازشون مشکلی برات ایجاد نمیکنه ، حتی الان برای کار های گرافیکی متحرک هم از After Effects استفاده میکنند و در نهایت خروجی Json رو تبدیل به SVG میکنند، یعنی به طور کلی الان دیگه خیلی محیط ویژوال تر (بصری تر) شده و دیگه خیلی نیازی نیست که برای SVG شما کد بزنید.
یک نکته ای هم در رابطه با شخصی سازی بگم اگر شما تصویری که طراحی میکنید رو فایل SVG رو داخل همون Adobe Illustrator باز کنید، میتونید شخصی سازی رو انجام بدید و دوباره آپلود کنید، منظور من از شخصی سازی از طریق خود کد ها هست که امکان شخصی سازی فایل های گرافیکی طراحی شده با نرم افزار ها با کد های HTML و CSS یک مقدار سخته و پیشنهاد نمیشه. به عنوان جمع بندی حرفم ، برای سرعت بخشی به کارتون این ابزار ها میتونه مفید باشه و اشکالی در کد هاتون به وجود نمیاره.
خیلی خیلی ممنون استاد
کاملا متوجه شدم 🙂
خواهش میکنم ، موفق باشید 🌹
سلام دوستان اگر بجای طراحی لوگو در htmlبا کمک svgاز نرم افزار Inkscape برای طراحی لوگو با فرمت svgاستفاده کنیم مشکلی نداره؟
سلام وقت بخیر
در html مهم خروجی هست و مهم نیست با چه نرم افزاری طراحی میکنید. مهم اینکه فرمت یک فرمت قابل قبول برای html باشه و فرمت svg به خوبی در html لود میشه و اینکه از چه نرم افزاری استفاده میکنیم تا svg بسازیم در مبحث html مهم نیست.
خواهر عزیزم من فکر میکنم شما متوجه اصل موضوع نیستید. خیلی ساده میشه فهمید که اگر قرار باشه یک لوگو رو در قالب یک عکس توی صفحه وب درج کرد نه تنها ایلاستریوتر شما بلکه با هر نرمافزار گرافیکی نظیر فتوشاپ هم میشه بهترین لوگوها رو با کیفیتهای به مراتب بهتر از ایلاستریوتر طراحی کرد و در قالب یک فایل ایمیج در صفحه وب گنجاند. همه ارزش تگ svg در html کدمحور بودن طرحهای گرافیکیه که حجم بارگزاری سایت را بالا نمیبره هم بیننده به راحتی نمیتونه اونها رو در کامپیوترش ذخیره کنه… من پیشنهاد میکنم شما بجای استفاده از برنامه ایلاستریوتر از فتوشاپ در طراحی لوگو استفاده کنید.
متاسفانه آقای بهروز راهنمای شما اشتباه هست، برای طراحی حرفه ای لوگو از نرم افزار Adobe Illustrator استفاده میکنن و نه فتوشاپ.
شما نمیتونید با فتوشاپ کیفیت بی نهایت رو داشته باشید و برای بالا بردن کیفیت مجبور هستید اندازه سند رو بیشتر کنید این باعث میشه منابع سیستم شما به سختی درگیر این موضوع بشن و ادیت کردن خروجی گرفتن سخت بشه، در حالی که با Adobe Illustrator به راحتی میشه در اندازه های کوچک و با حجم بسیار کم خروجی های چندین متری حتی گرفت.
موفق باشید.
سلام
طرحی که تو Illustrator زدی رو نیاز نیست ببری تو فوتوشاپ و png کنی. میتونی svg ذخیره کنی و وقتی تو سایت میشینه دیگه افت کیفیتی درکار نیست
درضمن با css میتونی بهش موشن بدی که اینکار با Illustrator ممکن نیست تا اونجایی که میدونم!