شادی (دیجیتال) "رنگ آمیزی"

بنر از مقاله ویکی پدیا در مورد SVG است

بنابراین مدتی پیش تصمیم گرفتم که در XPath یادگیری کمی انجام دهم که منجر به یادگیری کمی در XML شد که منجر به یادگیری کمی در SVG شد.

از آنجایی که از بازی کردن در برنامه های هنری لذت می برم، SVGها مرا مجذوب خود کردند. اما من برای جلوگیری از منحرف شدن از هدفم برای یادگیری در مورد XPath، مدت زیادی در مورد آنها تحقیق نکردم. اکنون که کنجکاوی خود را برای XPath ارضا کردم، می توانم روی SVG تمرکز کنم!

مرحله 1 – مفهوم سازی: نمای کلی و تاریخچه

SVG مخفف ‘Scalable Vector Graphics’ است و گرافیک های دو بعدی هستند که با استفاده از XML ایجاد شده اند. XML مخفف Extensible Markup Language و زبانی شبیه به HTML است که می تواند انواع مختلفی از داده ها را ایجاد و دستکاری کند.

SVG ها یکی از آن “انواع داده” هستند!

SVG ها توسط چندین عضو W3C، کنسرسیوم وب جهانی ایجاد شدند.
در سال 1996 نیاز به یک قالب سند مقیاس پذیر که به خوبی در وب کار می کند تأیید شد. سپس در سال 1998، شش گروه رقیب ایده های خود را برای نحوه رسیدگی به این نیاز به W3C پیشنهاد کردند.
گروه کاری SVG همه موارد ارسالی را بررسی کرد و تصمیم گرفت هیچ یک از آنها را قبول نکند. در عوض، آنها تصمیم گرفتند که زبان کاملاً جدیدی ایجاد کنند که بسیار ضعیف از ارسال‌های گروهی الهام گرفته شده بود.

تصویر از https://www.w3.org/

برخی از تأثیرات آشکار از VML، پیشنهاد شده توسط Autodesk، Hewlett-Packard، Macromedia، و Microsoft و PGML، پیشنهاد شده توسط Adobe، IBM، Netscape، و Sun آمده است.
VML ها از یک میکروسینتکس استفاده می کردند که SVG WG نسخه خود را به دلیل توانایی قابل توجه آن در کاهش اندازه فایل ایجاد کرد.
PGML بر روشی که زبان SVG با جزئیاتی مانند فضای رنگی و دگرگونی ها رسیدگی می کند، تأثیر گذاشت.

تصویر از مقاله ویکی پدیا در مورد SVG است

تصاویر برداری، فونت‌ها و گرافیک‌هایی که به‌صورت SVG ایجاد می‌شوند، می‌توانند بدون از دست دادن کیفیت، بزرگ یا کوچک شوند. بنابراین (تقریبا) مهم نیست که چگونه در یک وب سایت استفاده می شود، همچنان روان و خوانا خواهد بود.

آنها همچنین می توانند در انیمیشن، برای چاپ، رابط های کاربری تلفن همراه و نقشه برداری GIS استفاده شوند!

مرحله 2 – پیش نویس ناهموار: ابزارهای هنری خود را آماده کنید

هنگام یادگیری ایجاد SVG های خود، منابع زیادی وجود دارد.
یک وب سایت رسمی W3C پر از راهنماها و اطلاعات دیگر وجود دارد. با این حال، به نظر نمی رسد که در زمان تحقیق من در نزدیک به یک دهه به روز شده باشد.
وب سایت های محبوب MDN و W3Schools نیز دارای مستندات و آموزش هایی برای کار با آنها هستند.
همچنین تعداد به ظاهر بی پایانی از منابع دیگر وجود دارد که می توانید با یک جستجوی سریع در اینترنت به آنها برخورد کنید.

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

هفت تگ شکل برای ترسیم وجود دارد و هر کدام دارای ویژگی های منحصر به فردی هستند که ظاهر آنها را کنترل می کند.
Rectangle: – این تگ عنصر را ایجاد می کند و دارای شش ویژگی است:
X و Y ویژگی های جداگانه ای هستند که موقعیت مستطیل ها را در گوشه سمت چپ بالا تعیین می کنند.
عرض و ارتفاع، همچنین ویژگی های جداگانه. آنها عرض و ارتفاع مستطیل شما را تعیین می کنند. شما با دادن مقدار یکسان به این دو ویژگی یک مربع ایجاد می کنید.
Rx و Ry مشخصه‌های جداگانه‌ای هستند که شعاع گوشه‌ها را تعیین می‌کنند، یعنی چقدر گرد خواهند بود.

<rect x="0" y="0" rx="25" ry="25" width="100%" height="100%" fill="pink" />

دایره: – این عنصر دارای 3 ویژگی است:
R شعاع دایره، فاصله از مرکز تا لبه را تعیین می کند. بنابراین این اندازه کلی آن را تعیین می کند.
Cx و Cy ویژگی های جداگانه ای هستند که موقعیت x و y دایره شما را روی بوم شما تنظیم می کنند.

 <circle cx="160" cy="180" r="50" fill="pink" />

بیضی: – شبیه به یک دایره، اما شما می توانید شعاع x و y را با استفاده از 2 مورد از چهار ویژگی آن دستکاری کنید:
Rx و Ry دو ویژگی هستند که به طور جداگانه شعاع x و y دایره را کنترل می کنند.
Ellipse همچنین ویژگی های Cx & Cy را از آنها به ارث برده است و آنها نیز به همین ترتیب رفتار می کنند.

خط: – یک خط مستقیم را بین دو نقطه تعریف شده با استفاده از چهار ویژگی آن رسم می کند:
X1 و Y1 موقعیت نقطه شروع شما را روی بوم تعیین می کنند.
X2 و Y2 موقعیت را در نقطه پایانی شما تعیین می کنند.

Polyline: – یک گروه متصل از خطوط مستقیم ایجاد می کند. همه نقاط با ویژگی واحد آن تعیین می شوند:
Points از لیستی از اعداد جفت استفاده می کند که موقعیت X و Y را نشان می دهد و هر نقطه قرار می گیرد که مجموعه خطوط را به هم متصل می کند.

Polygon: – فقط یک ویژگی دارد که از :
Points دقیقاً به همان روشی عمل می کند که در چند خط انجام داد، با این تفاوت که اولین و آخرین نقطه تنظیم به طور خودکار توسط یک خط به هم متصل می شوند تا یک شکل محصور ایجاد کنند.

مسیر: – همه کاره ترین تگ شکل. می توان از آن برای ایجاد هر یک از اشکالی که قبلا ذکر شد و همچنین ایجاد خطوط منحنی استفاده کرد. همه این کارها را با استفاده از یک ویژگی واحد انجام می دهد:
D برای تعریف نقاطی که مسیر دنبال می شود استفاده می شود. اما در واقع فهرستی از دستورات فرعی خود را دارد که تعیین می کند لبه مسیر چگونه به نظر می رسد.
10 دستور فرعی وجود دارد که با حروف نمایش داده می شوند.

حروف دارای اثرات حساس به حروف بزرگ و کوچک هستند: Upper نقطه را در یک موقعیت مطلق قرار می دهد، Lower نقطه را در یک موقعیت نسبی قرار می دهد.

<path d="M 10 10 L 20 50 L 150 150 L 50 190 L 100 50 L 200 140" />

M (Move to) 2 پارامتر را می گیرد که موقعیت شروع ترسیم مسیر شما را مشخص می کند.
4 مورد وجود دارد که خطوط مستقیم را کنترل می کنند: L (خط به)، H (خط افقی به)، V (خط عمودی به)، و Z (بستن مسیر).

• به L 2 عدد داده می شود تا x و y را نشان دهد و یک خط از یک نقطه لیست شده قبلی به این مکان جدید رسم می شود.
• H فقط برای X و V فقط برای y مقدار می گیرد. آنها فقط خطوط را در سراسر دسترسی که کنترل می کنند ایجاد می کنند.
• Z هیچ پارامتری را نمی گیرد و حرف به تنهایی در انتهای گره مسیر قرار می گیرد. این به این دلیل است که هدف آن ترسیم یک خط مستقیم بین اولین و آخرین نقطه است.

4 خط منحنی دیگر را کنترل کنید: C (منحنی به)، S (منحنی صاف به)، Q (منحنی Bezier درجه دوم)، و T (منحنی درجه دوم Bezier صاف).

• C 3 جفت مقدار xy می گیرد. جفت اول منحنی نقطه قبلی (M) را کنترل می کند. سپس جفت دوم منحنی نقطه پایانی را کنترل می کند و جفت سوم محل نقطه پایانی است. C از این مقادیر برای ایجاد یک خط منحنی استفاده می کند.
• S جفت مقادیر xy را می گیرد و از آنها برای ایجاد و گسترش خطوط منحنی منفرد استفاده می کند. عمل جفت اول بسته به اینکه از نقطه C یا S دیگری پیروی کند یا بعد از M رخ دهد تغییر می کند. اگر بعد از M باشد، به عنوان اولین نقطه کنترل منحنی در نظر گرفته می شود. اگر از یک C یا S دیگر پیروی کند، منحنی نقطه ای را که به دنبال آن می آید کنترل می کند.
• Q همچنین منحنی ایجاد می کند اما فقط به دو جفت مقدار xy نیاز دارد. جفت اول از M پیروی می کند و منحنی را تعیین می کند. جفت دوم نقطه پایان خط را تعیین می کند.
• T مانند S عمل می کند زیرا برای گسترش منحنی ها از Q یا ایجاد آنها به تنهایی استفاده می شود.

<path d="M 5 150 S 50 50, 90 90, 150 150, 185 5" stroke="black" />

<path d="M 5 150 Q 100 0 175 75" stroke="black" />

A (Arc) برای ایجاد بخشی از یک دایره یا بیضی استفاده می شود.
این کمی پیچیده تر است زیرا 7 پارامتر را می پذیرد:
شعاع محور X، شعاع محور y، چرخش بیضی نسبت به محور x، پرچمی برای استفاده از کمان بزرگ یا کوچک، پرچمی که جهت قوس را تعیین می کند و در نهایت مختصات xy برای نقطه پایانی

مرحله 3 – ایجاد و ارائه: کار خود را نمایش دهید!

عکس اسنپ از کارتون Chalkzone

تگ‌ها، ویژگی‌ها و دستورات مورد بحث در بالا تنها یک قطره از مواردی هستند که می‌توان برای دستکاری SVGها استفاده کرد، بنابراین فعلاً بیایید ببینیم که چه نوع هنری را می‌توانیم با استفاده از آنها ایجاد کنیم.

ابتدا باید اپلیکیشنی را انتخاب کنید که شاهکار خود را در آن بسازید.
یک برنامه هنری Inkscape در مقابل ویرایشگر متن استاندارد شما در مقابل یک IDE انتخابی شما. تصمیم گرفتم با استفاده از Replit بازی کنم.

<svg width="500px" height="50px" xmlns="http://www.w3.org/2000/svg"></svg>

با افزودن جفت تگ از داخل تگ بدنه یک الگوی HTML شروع کنید: <svg></svg>

سپس می‌خواهید ویژگی‌های Width و Height را در اندازه‌ای که می‌خواهید تصویرتان باشد، تنظیم کنید.
پارامتر “xmlns” مخفف فضای نام XML است و مهم است زیرا چندین گویش XML وجود دارد. به این معنی که چندین منبع ممکن است از یک کلمه کلیدی به روش های مختلف استفاده کنند. برای اینکه مطمئن شوید SVG شما همانطور که در نظر گرفته شده نمایش داده می شود، می خواهید مشخص کنید که به کدام یک ارجاع داده شود.

به صورت اختیاری، می توانید از عنصر مستطیل برای پر کردن “بوم” خود استفاده کنید تا درک فضای کار در دسترس شما آسان تر شود.
سپس با استفاده از ابزارهایی که قبلاً جمع آوری کرده ایم شروع به سرگرم شدن کنید!

<svg width="450px" height="400px" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#2E8B57" />
<circle cx="160" cy="180" r="70" fill="black" />
<ellipse cx="110" cy="200" rx="30" ry="40" fill="black" transform="rotate(30 110 200)" />
<ellipse cx="160" cy="100" rx="20" ry="80" fill="black" transform="rotate(10 160 100)" />
<ellipse cx="220" cy="80" rx="20" ry="80" fill="black" transform="rotate(40 220 80)" /> 
<circle cx="250" cy="280" r="100" fill="black" />
<ellipse cx="150" cy="310" rx="20" ry="50" fill="black" transform="rotate(20 150 310)" />
<ellipse cx="190" cy="340" rx="20" ry="50" fill="black" transform="rotate(20 190 340)" /> 
<circle cx="350" cy="325" r="40" fill="black" />
</svg>

برای این اسم حیوان دست اموز ساده، من از یک ویژگی اضافی استفاده کردم که توضیح ندادم، تبدیل، من نمی توانستم در برابر بازی با آن مقاومت کنم. ابزار Path هنوز برای من کمی زیاد است، اما از همپوشانی اشکال برای ایجاد یک شبح لذت بردم. تغییر دادن مقادیر و توانایی دیدن بصری قسمت‌هایی که روی آن‌ها تأثیر می‌گذارند واقعاً به من کمک کرد تا بفهمم چگونه با این پارامترها کار کنم.
از آنجایی که سایت‌های متعددی وجود دارد که می‌توانید فایل‌های SVG رایگان را دانلود کنید، فکر می‌کنم با کپی کردن کد برخی از آنها در یک ویرایشگر و شروع به بازی کردن، چیزهای زیادی یاد خواهم گرفت.

مرحله 4 – لوازم هنری: منابع

• MDN
• W3Schools
• ویکی‌مدیا کامانز
• ویکیپدیا
• W3.Org