۱۳۹۸-۰۴-۱۶، ۱۲:۲۹ ق.ظ
چگونگی ایجاد فرم های ساده با SVG
آموزش طراحی سایت
![[تصویر: %DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8...A7-SVG.jpg]](http://magbot.ir//%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%81%D8%B1%D9%85-%D9%87%D8%A7%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%A7-SVG/%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%81%D8%B1%D9%85-%D9%87%D8%A7%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%A7-SVG.jpg)
در گذشته، تنها فرمت تصویری که توسط تمام مرورگرها پشتیبانی می شد، 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 تصویر به نظر می رسد:
![[تصویر: 0.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/0.jpg)
در این مثال، از تگ دایره استفاده کردم و سپس cx (مختصات x) و cy (y مختصات) را تعیین می کند که مرکز دایره را تعیین می کند. بعد، من مقدار 50 را در r(شعاع) قرار داده ام، که طول قطعه خط را از مرکز آن به محیط آن تعریف می کند. در نهایت، سبک های اضافه شده برای رنگ پر رنگ، سکته مغزی و سکته مغزی عرض را اضافه کردم که بسیار خود توضیحی است.
ایجاد یک مستطیل در SVG
مستطیل را می توان با استفاده از برچسب مستطیل اجرا کرد و می تواند انواع مختلف ارتفاع و عرض را بسازد. کد زیر را بررسی کنید.
تصویر حاصل از Rectangle SVG مانند این خواهد بود:
![[تصویر: 5.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/5.jpg)
با استفاده از برچسب مستطیل، من عرض و ارتفاع مستطیل را تعریف می کنم. سپس rx و ry، اضافه شد که از لبه مستطیل دور می شود. شما می توانید این دو (rx و ry ) را حذف کنید اگر می خواهید لبه های تیز داشته باشید. بعد ما سبک ها را برای پر رنگ، رنگ سکته و عرض سکته اضافه کردیم.
ایجاد یک بیضوی در SVG
Ellipse SVG را می توان با استفاده از برچسب بیضی اجرا کرد. Ellips ها نیازی به ارتفاع و عرض ندارند و بر خلاف SVG دایره، شعاع ( cx و cy ) متفاوت است. کد زیر را در نظر بگیرید.
کد زیر را در نظر بگیرید.
تصویر Ellipse SVG به این صورت خواهد بود:
![[تصویر: 10.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/10.jpg)
cx و cy مرکز مرکز بیضی را تعریف می کند در حالی که rx و ry شعاع بیضی را تعریف می کنند. همانطور که می بینید، rx عرض ابعاد را توضیح می دهد در حالی کهry توصیف می کند که چقدر بلند خواهد شد. سپس ما سبک ها را برای پر کردن رنگ، رنگ سکته و عرض سکته می کنیم.
ایجاد یک خط در SVG
خط SVG را می توان با استفاده از برچسب خط اجرا کرد. از نام خود، برچسب برای رسم خطوط استفاده می شود. مثال زیر را بررسی کنید.
تصویر خطی SVG تصویر به صورت زیر خواهد بود:
![[تصویر: 15.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/15.jpg)
در این مثال، x1 ( محور x ) و y1 ( محور y ) نقطه شروع خط در حالی که x2 ( محور x ) و y2 ( محور y ) نقطه پایانی خط را تعریف می کنند. با استفاده از ویژگی سبک، من یک رنگ سکته مغزی سیاه و یک عرض 5 پیکسل ایجاد کردم.
ایجاد یک Polyline در SVG
یک SVG چند خطی را می توان با استفاده از برچسب چند خطی اجرا کرد. این برای رسم اشکال است که از خطوط مستقیم تشکیل شده است. در اینجا یک مثال است.
نتیجه نتیجه Polyline SVG مانند این خواهد بود:
![[تصویر: 20.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/20.jpg)
با استفاده از x ( محور x ) و y ( y محور )، می توانید هر نقاط از خطوط برای ایجاد یک شکل خاصی که می خواهید. همانطور که می بینید، من 4 امتیاز را با خطوط پیوستم. من همچنین یک سکته مغزی سیاه و یک سکته مغزی عرض 3 پیک اضافه کردم.
ایجاد چندگانه در SVG
چندگانه SVG را می توان با استفاده از برچسب چند ضلعی اجرا کرد. این عنصر شکل را شکل می دهد که دارای بیش از 3 طرف است. کد زیر را بررسی کنید.
تصویر Polygon SVG نتیجه به نظر می رسد:
![[تصویر: 25.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/25.jpg)
در Polygon SVG، نقاط توسط محور x و y برای هر طرف چند ضلعی از آخرین نقطه به آخرین تعریف می شود. در این مثال، من شش گوشه ای با 6 طرف ایجاد کردم. همانطور که می بینید، 6 امتیاز وجود دارد که با هم توسط x و y تعریف می شود. سپس رنگ پر رنگ سایه را پس از رنگ سکته مغزی قرمز و سکته مغزی عرض 1 پیک قرار داده ام.
ایجاد مسیر در SVG
مسیر SVG را می توان با استفاده از برچسب مسیر اجرا کرد. این عنصر مسیر پیشرفته و شکل هایی را که شامل منحنی ها، خطوط و قوس ها می باشد، جلب می کند. در میان تمام عناصر SVG، این یکی از کاربردی ترین و در عین حال سخت ترین روش برای یادگیری و دستکاری است. مسیر SVG از دستورات زیر استفاده می کند:
حروف بزرگ به این معنی است که موقعیت کاملا موقعیتی خواهد بود در حالی که حروف کوچک به معنای موقعیت نسبی هستند. مثال زیر را ببینید.
تصویر مسیر تصویر SVG مانند این خواهد بود:
![[تصویر: 30.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/30.jpg)
از کد بالا، می توانید ببینید که از d نام استفاده می شود. این ویژگی d همیشه یک فرمان حرکت است. بعد از استفاده از M که به معنی حرکت به. قبل از اینکه بتوانید چیزی را جلب کنید، باید مکان نما مجازی را به مکان مورد نظر خود منتقل کنید.
بنابراین برای این مثال، من محور x را به 30 سفید محور y به 40 حرکت می دهم. منحنی از 140، -30 به عنوان نقطه شروع نقطه آستانه ما شروع می شود. بعد منحنی به سمت راست با نقاط 180، 90 و به پایان می رسد با 20، 160 به سمت راست اشاره دارد. برای نهایی کردن مسیر، یک خط با نقاط 120 و 160 ایجاد کردم.
ایجاد متن در SVG
متن SVG ها را می توان با استفاده از برچسب محصور شده با برچسب متن اجرا کرد. این عنصر برای نوشتن متن در تصویر SVG استفاده می شود.
تصویر Text SVG تصویر به صورت زیر خواهد بود:
![[تصویر: 35.jpg]](http://magbot.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%a7-SVG/35.jpg)
در این مثال من موقعیت x محور متن را به 20 تنظیم می کنم. این متن 20 پیکسل را از سمت چپ قرار می دهد در حالی که من محدوده y را به 30 تنظیم می کنم که متن 30 پیکسل را از بالا قرار می دهد. بعد، رنگ پر رنگ آبی را تنظیم کردم و اندازه فونت را به 20 پیکسل تنظیم کردم. این متن "این نمونه عالی برای متن SVG است" را نمایش می دهد
src = "40.jpg
مقالات مرتبط
دستورالعمل های عکاسی طراحان وب که باید بدانند
نکات کلیدی در هنگام تشکیل یک تیم UX
SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو
آموزش طراحی سایت
در گذشته، تنها فرمت تصویری که توسط تمام مرورگرها پشتیبانی می شد، 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 تصویر به نظر می رسد:
در این مثال، از تگ دایره استفاده کردم و سپس cx (مختصات x) و cy (y مختصات) را تعیین می کند که مرکز دایره را تعیین می کند. بعد، من مقدار 50 را در r(شعاع) قرار داده ام، که طول قطعه خط را از مرکز آن به محیط آن تعریف می کند. در نهایت، سبک های اضافه شده برای رنگ پر رنگ، سکته مغزی و سکته مغزی عرض را اضافه کردم که بسیار خود توضیحی است.
ایجاد یک مستطیل در SVG
مستطیل را می توان با استفاده از برچسب مستطیل اجرا کرد و می تواند انواع مختلف ارتفاع و عرض را بسازد. کد زیر را بررسی کنید.
تصویر حاصل از Rectangle SVG مانند این خواهد بود:
با استفاده از برچسب مستطیل، من عرض و ارتفاع مستطیل را تعریف می کنم. سپس rx و ry، اضافه شد که از لبه مستطیل دور می شود. شما می توانید این دو (rx و ry ) را حذف کنید اگر می خواهید لبه های تیز داشته باشید. بعد ما سبک ها را برای پر رنگ، رنگ سکته و عرض سکته اضافه کردیم.
ایجاد یک بیضوی در SVG
Ellipse SVG را می توان با استفاده از برچسب بیضی اجرا کرد. Ellips ها نیازی به ارتفاع و عرض ندارند و بر خلاف SVG دایره، شعاع ( cx و cy ) متفاوت است. کد زیر را در نظر بگیرید.
کد زیر را در نظر بگیرید.
تصویر Ellipse SVG به این صورت خواهد بود:
cx و cy مرکز مرکز بیضی را تعریف می کند در حالی که rx و ry شعاع بیضی را تعریف می کنند. همانطور که می بینید، rx عرض ابعاد را توضیح می دهد در حالی کهry توصیف می کند که چقدر بلند خواهد شد. سپس ما سبک ها را برای پر کردن رنگ، رنگ سکته و عرض سکته می کنیم.
ایجاد یک خط در SVG
خط SVG را می توان با استفاده از برچسب خط اجرا کرد. از نام خود، برچسب برای رسم خطوط استفاده می شود. مثال زیر را بررسی کنید.
تصویر خطی SVG تصویر به صورت زیر خواهد بود:
در این مثال، x1 ( محور x ) و y1 ( محور y ) نقطه شروع خط در حالی که x2 ( محور x ) و y2 ( محور y ) نقطه پایانی خط را تعریف می کنند. با استفاده از ویژگی سبک، من یک رنگ سکته مغزی سیاه و یک عرض 5 پیکسل ایجاد کردم.
ایجاد یک Polyline در SVG
یک SVG چند خطی را می توان با استفاده از برچسب چند خطی اجرا کرد. این برای رسم اشکال است که از خطوط مستقیم تشکیل شده است. در اینجا یک مثال است.
نتیجه نتیجه Polyline SVG مانند این خواهد بود:
با استفاده از x ( محور x ) و y ( y محور )، می توانید هر نقاط از خطوط برای ایجاد یک شکل خاصی که می خواهید. همانطور که می بینید، من 4 امتیاز را با خطوط پیوستم. من همچنین یک سکته مغزی سیاه و یک سکته مغزی عرض 3 پیک اضافه کردم.
ایجاد چندگانه در SVG
چندگانه SVG را می توان با استفاده از برچسب چند ضلعی اجرا کرد. این عنصر شکل را شکل می دهد که دارای بیش از 3 طرف است. کد زیر را بررسی کنید.
تصویر Polygon SVG نتیجه به نظر می رسد:
در Polygon SVG، نقاط توسط محور x و y برای هر طرف چند ضلعی از آخرین نقطه به آخرین تعریف می شود. در این مثال، من شش گوشه ای با 6 طرف ایجاد کردم. همانطور که می بینید، 6 امتیاز وجود دارد که با هم توسط x و y تعریف می شود. سپس رنگ پر رنگ سایه را پس از رنگ سکته مغزی قرمز و سکته مغزی عرض 1 پیک قرار داده ام.
ایجاد مسیر در SVG
مسیر SVG را می توان با استفاده از برچسب مسیر اجرا کرد. این عنصر مسیر پیشرفته و شکل هایی را که شامل منحنی ها، خطوط و قوس ها می باشد، جلب می کند. در میان تمام عناصر SVG، این یکی از کاربردی ترین و در عین حال سخت ترین روش برای یادگیری و دستکاری است. مسیر SVG از دستورات زیر استفاده می کند:
حروف بزرگ به این معنی است که موقعیت کاملا موقعیتی خواهد بود در حالی که حروف کوچک به معنای موقعیت نسبی هستند. مثال زیر را ببینید.
تصویر مسیر تصویر SVG مانند این خواهد بود:
از کد بالا، می توانید ببینید که از d نام استفاده می شود. این ویژگی d همیشه یک فرمان حرکت است. بعد از استفاده از M که به معنی حرکت به. قبل از اینکه بتوانید چیزی را جلب کنید، باید مکان نما مجازی را به مکان مورد نظر خود منتقل کنید.
بنابراین برای این مثال، من محور x را به 30 سفید محور y به 40 حرکت می دهم. منحنی از 140، -30 به عنوان نقطه شروع نقطه آستانه ما شروع می شود. بعد منحنی به سمت راست با نقاط 180، 90 و به پایان می رسد با 20، 160 به سمت راست اشاره دارد. برای نهایی کردن مسیر، یک خط با نقاط 120 و 160 ایجاد کردم.
ایجاد متن در SVG
متن SVG ها را می توان با استفاده از برچسب محصور شده با برچسب متن اجرا کرد. این عنصر برای نوشتن متن در تصویر SVG استفاده می شود.
تصویر Text SVG تصویر به صورت زیر خواهد بود:
در این مثال من موقعیت x محور متن را به 20 تنظیم می کنم. این متن 20 پیکسل را از سمت چپ قرار می دهد در حالی که من محدوده y را به 30 تنظیم می کنم که متن 30 پیکسل را از بالا قرار می دهد. بعد، رنگ پر رنگ آبی را تنظیم کردم و اندازه فونت را به 20 پیکسل تنظیم کردم. این متن "این نمونه عالی برای متن SVG است" را نمایش می دهد
src = "40.jpg
دستورالعمل های عکاسی طراحان وب که باید بدانند
نکات کلیدی در هنگام تشکیل یک تیم UX
SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو
