چگونگی ایجاد فرم های ساده با SVG


در گذشته، تنها فرمت تصویری که توسط تمام مرورگرها پشتیبانی می شد، GIF بود، یک فایل تصویری که توسط CompuServe طراحی شده بود. سپس فایل تصویری JPEG که فشرده سازی وحشتناکی بدون از بین رفتن جزئیات ارائه شد، اما در مقایسه با فرمت تصویر GIF بسیار کوچک است.

پس از مدتی، هدف گرافیک کامپیوتری بردار 2 بعدی بر روی وب ایجاد شد. با استفاده از فرمت های بسیار رقابتی که به W3C منتقل شد، SVG در نهایت در سال 1999 توسعه یافت.

حالا ما آموزش اشکال CSS را منتشر کردیم، ما می خواستیم به شما نحوه ایجاد اشکال با SVG را نشان دهیم. این آموزش نحوه استفاده از SVG را در صفحات وب توضیح می دهد.
جعبه ابزار طراح شما
نامحدود دانلود: 500،000+ قالب وب، مجموعه آیکون، تم ها و طراحی دارایی

SVG، که برای گرافیک برداری مقیاس پذیر ، یک فرمت تصویر مبتنی بر XML برای وب است. بر خلاف فرمت های فایل تصویری GIF، PNG و JPEG، SVG مقیاس پذیر است، به این معنی که بدون توجه به چگونگی ضبط یا بزرگنمایی فایل تصویر، کیفیت همچنان خوب به نظر می رسد.

به عنوان یک فایل XML، SVG را می توان ایجاد، سفارشی و با دیگر استانداردهای W3C مانند DOM و XSL با استفاده از هر ویرایشگر متن سازگار کرد. تصاویر SVG همچنین می توانند با استفاده از برنامه های طراحی یا بردار مانند Adobe Illustrator، به صورت بصری ایجاد شوند.
چرا از SVG استفاده می شود؟

SVG را می توان به راحتی در HTML با استفاده از برچسب های SVG تعبیه کرد. نحو زیر را در نظر بگیرید.

همانطور که می بینید، SVG دارای تگ های خاص خود است. SVG باید عرض و ارتفاع داشته باشد تا عنصر آن را داشته باشد. عناصر زیر می توانند در داخل بوم خود استفاده کنند.

بنابراین بگذارید این آموزش عالی را شروع کنیم.
ایجاد دایره در SVG

SVG های دایره ای را می توان با استفاده از برچسب دایره اجرا کرد. در اینجا یک مثال است.

تصویر حلقه SVG تصویر به نظر می رسد:

circle-svg

در این مثال، از تگ دایره استفاده کردم و سپس cx (مختصات x) و cy (y مختصات) را تعیین می کند که مرکز دایره را تعیین می کند. بعد، من مقدار 50 را در r (شعاع) قرار داده ام، که طول قطعه خط را از مرکز آن به محیط آن تعریف می کند. در نهایت، سبک های اضافه شده برای رنگ پر رنگ، سکته مغزی و سکته مغزی عرض را اضافه کردم که بسیار خود توضیحی است.
ایجاد یک مستطیل در SVG

مستطیل را می توان با استفاده از برچسب مستطیل اجرا کرد و می تواند انواع مختلف ارتفاع و عرض را بسازد. کد زیر را بررسی کنید.

تصویر حاصل از Rectangle SVG مانند این خواهد بود:

rectangle-svg

با استفاده از برچسب مستطیل، من عرض و ارتفاع مستطیل را تعریف می کنم. سپس rx و ry، اضافه شد که از لبه مستطیل دور می شود. شما می توانید این دو ( rx و ry ) را حذف کنید اگر می خواهید لبه های تیز داشته باشید. بعد ما سبک ها را برای پر رنگ، رنگ سکته و عرض سکته اضافه کردیم.
ایجاد یک بیضوی در SVG

Ellipse SVG را می توان با استفاده از برچسب بیضی اجرا کرد. Ellips ها نیازی به ارتفاع و عرض ندارند و بر خلاف SVG دایره، شعاع ( cx و cy ) متفاوت است. کد زیر را در نظر بگیرید.

کد زیر را در نظر بگیرید.

تصویر Ellipse SVG به این صورت خواهد بود:

ellipse-svg

cx و cy مرکز مرکز بیضی را تعریف می کند در حالی که rx و ry شعاع بیضی را تعریف می کنند. همانطور که می بینید، rx عرض ابعاد را توضیح می دهد در حالی که ry توصیف می کند که چقدر بلند خواهد شد. سپس ما سبک ها را برای پر کردن رنگ، رنگ سکته و عرض سکته می کنیم.
ایجاد یک خط در SVG

خط SVG را می توان با استفاده از برچسب خط اجرا کرد. از نام خود، برچسب برای رسم خطوط استفاده می شود. مثال زیر را بررسی کنید.

تصویر خطی SVG تصویر به صورت زیر خواهد بود:

line-svg

در این مثال، x1 ( محور x ) و y1 ( محور y ) نقطه شروع خط در حالی که x2 ( محور x ) و y2 ( محور y ) نقطه پایانی خط را تعریف می کنند. با استفاده از ویژگی سبک، من یک رنگ سکته مغزی سیاه و یک عرض 5 پیکسل ایجاد کردم.
ایجاد یک Polyline در SVG

یک SVG چند خطی را می توان با استفاده از برچسب چند خطی اجرا کرد. این برای رسم اشکال است که از خطوط مستقیم تشکیل شده است. در اینجا یک مثال است.

نتیجه نتیجه Polyline SVG مانند این خواهد بود:

polyline

با استفاده از x ( محور x ) و y ( y محور )، می توانید هر نقاط از خطوط برای ایجاد یک شکل خاصی که می خواهید. همانطور که می بینید، من 4 امتیاز را با خطوط پیوستم. من همچنین یک سکته مغزی سیاه و یک سکته مغزی عرض 3 پیک اضافه کردم.
ایجاد چندگانه در SVG

چندگانه SVG را می توان با استفاده از برچسب چند ضلعی اجرا کرد. این عنصر شکل را شکل می دهد که دارای بیش از 3 طرف است. کد زیر را بررسی کنید.

تصویر Polygon SVG نتیجه به نظر می رسد:

polygon-svg

در Polygon SVG، نقاط توسط محور x و y برای هر طرف چند ضلعی از آخرین نقطه به آخرین تعریف می شود. در این مثال، من شش گوشه ای با 6 طرف ایجاد کردم. همانطور که می بینید، 6 امتیاز وجود دارد که با هم توسط x و y تعریف می شود. سپس رنگ پر رنگ سایه را پس از رنگ سکته مغزی قرمز و سکته مغزی عرض 1 پیک قرار داده ام.
ایجاد مسیر در SVG

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

حروف بزرگ به این معنی است که موقعیت کاملا موقعیتی خواهد بود در حالی که حروف کوچک به معنای موقعیت نسبی هستند. مثال زیر را ببینید.

تصویر مسیر تصویر SVG مانند این خواهد بود:

path-svg

از کد بالا، می توانید ببینید که از d نام استفاده می شود. این ویژگی d همیشه یک فرمان حرکت است. بعد از استفاده از M که به معنی حرکت به. قبل از اینکه بتوانید چیزی را جلب کنید، باید مکان نما مجازی را به مکان مورد نظر خود منتقل کنید.

بنابراین برای این مثال، من محور x را به 30 سفید محور y به 40 حرکت می دهم. منحنی از 140، -30 به عنوان نقطه شروع نقطه آستانه ما شروع می شود. بعد منحنی به سمت راست با نقاط 180، 90 و به پایان می رسد با 20، 160 به سمت راست اشاره دارد. برای نهایی کردن مسیر، یک خط با نقاط 120 و 160 ایجاد کردم.
ایجاد متن در SVG

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

تصویر Text SVG تصویر به صورت زیر خواهد بود:

text-svg

در این مثال من موقعیت x محور متن را به 20 تنظیم می کنم. این متن 20 پیکسل را از سمت چپ قرار می دهد در حالی که من محدوده y را به 30 تنظیم می کنم که متن 30 پیکسل را از بالا قرار می دهد. بعد، رنگ پر رنگ آبی را تنظیم کردم و اندازه فونت را به 20 پیکسل تنظیم کردم. این متن "این نمونه عالی برای متن SVG است" را نمایش می دهد