من اخیراً یک الگوی دیوار آجری به عنوان بخشی از خودم ایجاد کردم #الگوهای کوچک سری، چالشی که در آن الگوها یا بافت هایی با ظاهر ارگانیک در SVG در 560 بایت (یا تقریباً به اندازه دو توییت) ایجاد می کنم. برای تطبیق با این محدودیت، سفری را پشت سر گذاشتهام که راههای اساسی برای بهینهسازی الگوهای SVG را به من آموزش داده است تا کمترین کد ممکن را داشته باشند بدون اینکه بر کیفیت کلی تصویر تأثیر بگذارند.
من میخواهم شما را در این فرآیند راهنمایی کنم و به شما نشان دهم که چگونه میتوانیم یک الگوی SVG را انتخاب کنیم که از ۱۹۷ بایت شروع میشود و تا ۴۴ بایت کاهش مییابد - کاهش بسیار زیاد ۷۷.۷٪!
الگوی SVG
این همان چیزی است که به آن الگوی آجری "پیوند در حال اجرا" می گویند. این رایجترین الگوی آجری است که مطمئناً قبلاً دیدهاید: هر ردیف آجر به اندازه نصف طول یک آجر جابجا میشود و یک الگوی تکرارشونده را ایجاد میکند. ترتیب بسیار ساده است و SVG را می سازد <pattern>
عنصر مناسب برای بازتولید آن در کد.
SVG <pattern>
عنصر از یک شی گرافیکی از پیش تعریف شده استفاده می کند که می تواند در فواصل ثابت در امتداد محورهای افقی و عمودی تکرار شود (یا "کاشی کاری" شود. در اصل، ما یک الگوی کاشی مستطیلی تعریف می کنیم و برای رنگ آمیزی ناحیه پر تکرار می شود.
ابتدا ابعاد یک آجر و فاصله بین هر آجر را تعیین می کنیم. برای سادگی، از اعداد گرد و تمیز استفاده می کنیم: عرض 100
و ارتفاع 30
برای آجر، و 10
برای شکاف های افقی و عمودی بین آنها.
بعد، ما باید کاشی "پایه" خود را شناسایی کنیم. و با "کاشی" من در مورد کاشی های طرح دار صحبت می کنم تا کاشی های فیزیکی، که نباید با آجرها اشتباه گرفته شود. بیایید از قسمت برجسته تصویر بالا به عنوان کاشی الگوی خود استفاده کنیم: دو آجر کامل در ردیف اول، و یک آجر کامل بین دو نیم آجر در ردیف دوم قرار گرفته است. توجه داشته باشید که شکاف ها چگونه و کجا گنجانده شده اند، زیرا باید در کاشی الگوی تکراری گنجانده شوند.
هنگام استفاده از <pattern>
، باید الگوها را تعریف کنیم width
و height
، که با عرض و ارتفاع کاشی پایه مطابقت دارد. برای بدست آوردن ابعاد، به کمی ریاضی نیاز داریم:
Tile Width = 2(Brick Width) + 2(Gap) = 2(100) + 2(10) = 220
Tile Height = 2(Bright Height) + 2(Gap) = 2(30) + 2(10) = 80
بسیار خوب، پس کاشی الگوی ما اینگونه است 220✕80
. ما همچنین باید تنظیم کنیم patternUnits
ویژگی، جایی که مقدار userSpaceOnUse
در اصل به معنای پیکسل است. در نهایت، اضافه کردن یک id
به الگو لازم است تا زمانی که عنصر دیگری را با آن نقاشی می کنیم بتوان به آن ارجاع داد.
<pattern id="p" width="220" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
اکنون که ابعاد کاشی را مشخص کرده ایم، چالش ایجاد کد برای کاشی به گونه ای است که گرافیک را با کمترین تعداد بایت ممکن ارائه کند. این چیزی است که امیدواریم در پایان به آن بپردازیم:
نشانه گذاری اولیه (197 بایت)
ساده ترین و بیانی ترین روش برای بازسازی این الگو که به ذهن من می رسد، کشیدن پنج مستطیل است. به طور پیش فرض، fill
یک عنصر SVG سیاه است و stroke
شفاف است این برای بهینهسازی الگوهای SVG به خوبی کار میکند، زیرا مجبور نیستیم آنها را به صراحت در کد اعلام کنیم.
هر خط در کد زیر یک مستطیل را تعریف می کند. در width
و height
همیشه تنظیم می شوند، و x
و y
موقعیتها فقط در صورتی تنظیم میشوند که یک مستطیل از سمت راست خارج شود 0
موقعیت.
<rect width="100" height="30"/>
<rect x="110" width="100" height="30"/>
<rect y="40" width="45" height="30"/>
<rect x="55" y="40" width="100" height="30"/>
<rect x="165" y="40" width="55" height="30"/>
ردیف بالایی کاشی شامل دو آجر با عرض کامل بود، آجر دوم در موقعیت قرار دارد x="110"
اجازه می دهد 10
پیکسل های شکاف قبل از آجر. به طور مشابه وجود دارد 10
پیکسل شکاف پس از آن، زیرا آجر به پایان می رسد در 210
پیکسل (110 + 100 = 210
) در محور افقی حتی اگر <pattern>
عرض است 220
پیکسل ها ما به آن کمی فضای اضافی نیاز داریم. در غیر این صورت آجر دوم با آجر اول در کاشی مجاور ادغام می شود.
آجرهای ردیف دوم (پایین) به صورت افست شده اند، بنابراین ردیف شامل دو نیم آجر و یک آجر کامل است. در این مورد، ما میخواهیم آجرهای نیمهعرض با هم ادغام شوند تا هیچ شکافی در ابتدا یا انتها وجود نداشته باشد و به آنها اجازه دهد تا بهطور یکپارچه با آجرها در کاشیهای الگوی مجاور جریان پیدا کنند. هنگام جابجایی این آجرها، باید شکاف های نیمه را نیز در نظر بگیریم، بنابراین x
ارزشها هستند 55
و 165
بود.
استفاده مجدد از عنصر، (-43B، کل 154B)
به نظر می رسد که تعریف هر آجر به این صراحت ناکارآمد باشد. آیا راهی برای بهینه سازی الگوهای SVG با استفاده مجدد از شکل ها وجود ندارد؟
فکر نمیکنم به طور گسترده شناخته شده باشد که SVG دارای یک است <use>
عنصر میتوانید با آن به عنصر دیگری ارجاع دهید و آن عنصر ارجاعشده را در هر کجا ارائه دهید <use>
استفاده می شود. این باعث صرفه جویی در تعداد زیادی بایت می شود زیرا می توانیم عرض و ارتفاع هر آجر را به جز آجر اول مشخص نکنیم.
که گفت، <use>
با قیمت کمی عرضه می شود یعنی باید یک عدد اضافه کنیم id
برای عنصری که می خواهیم دوباره استفاده کنیم.
<rect id="b" width="100" height="30"/>
<use href="#b" x="110"/>
<use href="#b" x="-55" y="40"/>
<use href="#b" x="55" y="40"/>
<use href="#b" x="165" y="40"/>
کوتاهترین id
ممکن است یک کاراکتر است، بنابراین من "b" را برای آجر انتخاب کردم. در <use>
عنصر را می توان به طور مشابه در موقعیت قرار داد <rect>
، با x
و y
صفات به عنوان افست. از آنجایی که اکنون که به آن تغییر داده ایم، هر آجر تمام عرض است <use>
(به یاد داشته باشید، آجرهای ردیف دوم کاشی الگو را به صراحت نصف کردیم)، باید از یک نگاتیو استفاده کنیم. x
مقدار را در ردیف دوم قرار دهید، سپس مطمئن شوید که آخرین آجر برای اتصال بدون درز بین آجرها از کاشی سرریز می شود. با این حال، اینها مشکلی ندارند، زیرا هر چیزی که خارج از کاشی الگو قرار گیرد به طور خودکار قطع می شود.
آیا میتوانید رشتههای تکراری را که میتوان کارآمدتر نوشت؟ بیایید روی آن موارد بعدی کار کنیم.
بازنویسی در مسیر (-54B، کل 100B)
<path>
احتمالا قوی ترین عنصر در SVG است. شما می توانید تقریباً هر شکلی را با "فرمان" در آن بکشید d
صفت. 20 دستور موجود است، اما ما فقط به ساده ترین آنها برای مستطیل ها نیاز داریم.
اینجا جایی است که من با آن فرود آمدم:
<path d="M0 0h100v30h-100z M110 0h100v30h-100 M0 40h45v30h-45z M55 40h100v30h-100z M165 40h55v30h-55z"/>
می دانم، اعداد و حروف فوق العاده عجیب و غریب! همه آنها معنی دارند، البته. آنچه در این مورد خاص اتفاق می افتد به شرح زیر است:
M{x} {y}
: بر اساس مختصات به نقطه ای حرکت می کند.z
: بخش فعلی را می بندد.h{x}
: یک خط افقی از نقطه فعلی رسم می کند، به طولx
در جهتی که با علامت تعریف شده استx
. حروف کوچکx
مختصات نسبی را نشان می دهد.v{y}
: یک خط عمودی از نقطه فعلی رسم می کند، به طولy
در جهتی که با علامت تعریف شده استy
. حروف کوچکy
مختصات نسبی را نشان می دهد.
این نشانه گذاری بسیار مختصرتر از قبلی است (خطوط شکسته و فضای خالی تورفتگی فقط برای خوانایی است). و، هی، ما موفق شدیم نیمی از اندازه اولیه را حذف کنیم و به 100 بایت برسیم. با این حال، چیزی باعث می شود که احساس کنم این می تواند کوچکتر باشد…
ویرایش کاشی (-38B، مجموع 62B)
کاشی الگوی ما قطعات تکراری ندارد؟ واضح است که در ردیف اول یک آجر کامل تکرار می شود، اما ردیف دوم چطور؟ دیدن آن کمی سخت تر است، اما اگر آجر میانی را از وسط نصف کنیم مشخص می شود.
خوب، آجر وسط دقیقاً از وسط نصف نشده است. یک جبران جزئی وجود دارد زیرا ما باید شکاف را نیز در نظر بگیریم. به هر حال، ما یک الگوی کاشی پایه سادهتر پیدا کردیم که به معنای بایت کمتر است! این همچنین به این معنی است که ما باید آن را به نصف کاهش دهیم width
ما <pattern>
عنصر از 220 تا 110.
<pattern id="p" width="110" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
حالا بیایید ببینیم کاشی ساده شده چگونه با آن کشیده شده است <path>
:
<path d="M0 0h100v30h-100z M0 40h45v30h-45z M55 40h55v30h-55z"/>
اندازه به 62 بایت کاهش یافته است که در حال حاضر کمتر از یک سوم اندازه اصلی است! اما چرا در اینجا توقف کنیم، وقتی که کارهای بیشتری هم می توانیم انجام دهیم!
دستورات مسیر کوتاه کردن (-9B، کل 53B)
ارزش آن را دارد که کمی عمیق تر به آن بپردازیم <path>
عنصر چون نکات بیشتری برای بهینه سازی الگوهای SVG ارائه می دهد. یک تصور اشتباه که من هنگام کار با آن داشتم <path>
در مورد چگونگی fill
ویژگی کار می کند من که در دوران کودکیام زیاد با اماس پینت بازی کردهام، یاد گرفتهام که هر شکلی را که میخواهم با یک رنگ ثابت پر کنم، باید بسته باشد، یعنی هیچ نقطه باز نداشته باشد. در غیر این صورت، رنگ از شکل خارج می شود و روی همه چیز می ریزد.
اما در SVG این درست نیست. اجازه بدهید نقل قول کنم مشخصات خود:
عملیات پر کردن، زیرمسیرهای باز را با انجام عملیات پر میکند، بهگونهای که گویی یک دستور «closepath» اضافی به مسیر اضافه شده است تا آخرین نقطه از مسیر فرعی را با اولین نقطه از مسیر فرعی متصل کند.
این بدان معنی است که ما می توانیم دستورات مسیر بسته را حذف کنیم (z
)، زیرا مسیرهای فرعی در هنگام پر شدن به طور خودکار بسته در نظر گرفته می شوند.
نکته مفید دیگری که باید در مورد دستورات مسیر بدانید این است که آنها در انواع حروف بزرگ و کوچک آمده اند. حروف کوچک به این معنی است که از مختصات نسبی استفاده می شود. به جای آن از حروف بزرگ به معنی مختصات مطلق استفاده می شود.
این کمی پیچیده تر از آن با H
و V
دستورات زیرا آنها فقط شامل یک مختصات هستند. در اینجا نحوه توصیف این دو دستور آمده است:
H{x}
: یک خط افقی از نقطه فعلی برای هماهنگی رسم می کندx
.V{y}
: یک خط عمودی از نقطه فعلی برای هماهنگی رسم می کندy
.
وقتی اولین آجر را در کاشی الگو می کشیم، از آن شروع می کنیم (0,0)
مختصات سپس یک خط افقی به (100,0)
و یک خط عمودی به (100,30)
و در نهایت یک خط افقی به (0,30)
. ما استفاده کردیم h-100
دستور در خط آخر، اما معادل آن است H0
، که به جای پنج بایت دو بایت است. ما می توانیم دو رخداد مشابه را جایگزین کنیم و کد خود را تجزیه کنیم <path>
تا اینجا:
<path d="M0 0h100v30H0 M0 40h45v30H0 M55 40h55v30H55"/>
9 بایت دیگر حذف شد - چقدر می توانیم کوچکتر کنیم؟
پل زدن (-5B، کل 48B)
طولانیترین دستوراتی که در مسیر ما برای الگوی کاملاً بهینهشده SVG قرار میگیرند، دستورات «حرکت به» هستند که به ترتیب 4، 5 و 6 بایت را اشغال میکنند. یک محدودیتی که داریم این است که:
بخش داده مسیر (در صورت وجود) باید با دستور "moveto" شروع شود.
اما اشکالی ندارد. به هر حال اولین مورد کوتاه ترین است. اگر ردیفها را عوض کنیم، میتوانیم به یک تعریف مسیر برسیم که در آن فقط باید به صورت افقی یا عمودی بین آجرها حرکت کنیم. چه می شد اگر می توانستیم از آن استفاده کنیم h
و v
به جای آن دستور می دهد M
?
نمودار بالا نشان می دهد که چگونه می توان سه شکل را با یک مسیر واحد ترسیم کرد. توجه داشته باشید که ما از این واقعیت استفاده می کنیم که fill
عملیات به طور خودکار قسمت باز بین را می بندد (110,0)
و (0,0)
. با این بازآرایی، شکاف را نیز به سمت چپ آجر تمام عرض ردیف دوم منتقل کردیم. این کد به نظر می رسد که هنوز به یک آجر در هر خط تقسیم می شود:
<path d="M0 0v30h50V0 h10v30h50 v10H10v30h100V0"/>
مطمئناً اکنون که به 48 بایت رسیده ایم، کوچکترین راه حل را پیدا کرده ایم، درست است؟! خوب…
برش رقومی (-4B، 44B در مجموع)
اگر بتوانید در ابعاد کمی انعطاف پذیر باشید، راه کوچک دیگری برای بهینه سازی الگوهای SVG وجود دارد. ما با عرض آجر کار کرده ایم 100
پیکسل، اما این سه بایت است. در حال تغییر آن به 90
یعنی هر زمان که نیاز به نوشتن داشته باشیم یک بایت کمتر است. به طور مشابه، ما از شکاف استفاده کردیم 10
پیکسل - اما اگر آن را به آن تغییر دهیم 8
در عوض، ما یک بایت در هر یک از آن رخدادها ذخیره می کنیم.
<path d="M0 0v30h45V0 h8v30h45 v8H8v30h90V0"/>
البته این بدان معناست که باید ابعاد الگو را بر اساس آن تنظیم کنیم. در اینجا کد الگوی SVG بهینه شده نهایی آمده است:
<pattern id="p" width="98" height="76" patternUnits="userSpaceOnUse"> <path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"/>
</pattern>
خط دوم در قطعه بالا - بدون احتساب تورفتگی ها - این است بایت 44. ما از 197 بایت در شش تکرار به اینجا رسیدیم. این یک درشت است کاهش سایز 77.7 درصد!
من تعجب می کنم که ... آیا این واقعا کوچکترین اندازه ممکن است؟ آیا همه راه های ممکن برای بهینه سازی الگوهای SVG را بررسی کرده ایم؟
از شما دعوت میکنم این کد را کوچکتر کنید، یا حتی روشهای جایگزین را برای بهینهسازی الگوهای SVG آزمایش کنید. من خیلی دوست دارم ببینم آیا می توانیم حداقل جهانی واقعی را با خرد جمعی پیدا کنیم یا خیر!
بیشتر در مورد ایجاد و بهینه سازی الگوهای SVG
اگر علاقه مند به کسب اطلاعات بیشتر در مورد ایجاد و بهینه سازی الگوهای SVG هستید، مقاله من را در مورد آن بخوانید ایجاد الگوها با فیلترهای SVG. یا اگر می خواهید گالری بیش از 60 الگو را بررسی کنید، می توانید آن را مشاهده کنید مجموعه CodePen Petite Patterns. در نهایت، شما به تماشای آن خوش آمدید آموزش های من در یوتیوب تا به شما کمک کند حتی بیشتر به الگوهای SVG برسید.
بهینه سازی الگوهای SVG به کوچکترین اندازه آنها در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.
- "
- 10
- 100
- 77
- 9
- 98
- درباره ما
- مطلق
- حساب
- اضافی
- معرفی
- اجازه دادن
- قبلا
- دیگر
- روش
- محدوده
- مقاله
- خواص
- در دسترس
- تبرها
- بیت
- سیاه پوست
- به چالش
- تغییر دادن
- بسته
- رمز
- مشترک
- ارتباط
- شامل
- محتوا
- مختصات
- میتوانست
- ایجاد
- جاری
- داده ها
- عمیق تر
- پایین
- به پایان می رسد
- تاسیس
- همه چیز
- مثال
- جز
- تجربه
- سرانجام
- نام خانوادگی
- مناسب
- جریان
- یافت
- بیشتر
- شکاف
- گرفتن
- جهانی
- داشتن
- ارتفاع
- کمک
- اینجا کلیک نمایید
- برجسته
- چگونه
- HTTPS
- شناسایی
- تصویر
- شامل
- مشمول
- IT
- خود
- شناخته شده
- نشت
- یاد گرفتن
- آموخته
- بهره برداری
- لاین
- کوچک
- نگاه
- عشق
- باعث می شود
- ساخت
- اداره می شود
- ریاضی
- ذهن
- بیش
- اکثر
- حرکت
- MS
- عدد
- تعداد
- چاپ افست
- خوب
- باز کن
- بهینه
- در غیر این صورت
- الگو
- فیزیکی
- نقطه
- موقعیت یابی شده
- ممکن
- قوی
- زیبا
- قیمت
- روند
- فراهم می کند
- کیفیت
- دور
- در حال اجرا
- سعید
- بدون درز
- سلسله
- تنظیم
- اشکال
- مشابه
- ساده
- شش
- اندازه
- So
- راه حل
- چیزی
- فضا
- Spot
- شروع
- شروع می شود
- پشتیبانی
- سخنگو
- از طریق
- بالا
- شفاف
- آموزش
- استفاده کنید
- ارزش
- چشم انداز
- W3
- تماشا کردن
- خوش آمد
- چی
- در داخل
- بدون
- مهاجرت کاری
- کارگر
- با این نسخهها کار
- با ارزش
- یوتیوب