SVGO مفید[ptimization] ابزار

یکی از مراحلی که باید هنگام کار با SVG بردارید، بهینه سازی کد SVG پس از صادرات آن از ویرایشگر و قبل از جاسازی آن در صفحه وب است. چندین ابزار بهینه سازی مستقل برای این کار وجود دارد. دو ابزاری که معمولاً در مقالات و صحبت‌هایم ذکر می‌کنم، ویرایشگر آنلاین پیتر کولینریج و SVGO هستند. در این مقاله، یک ابزار جدید SVGO را به شما معرفی می کنم که همه کارهایی که ابزار پیتر انجام می دهد و کمی بیشتر به ما می دهد.

این بدان معنا نیست که ابزار پیتر دیگر مفید نیست – مطمئناً همینطور است. اما اگر از SVGO استفاده می‌کنید، می‌دانید که با تمام ابزارهای موجود آن چقدر مفید است.

SVGO چیست؟

برای کسانی از شما که با SVGO آشنایی ندارید: این یک ابزار بهینه سازی SVG مبتنی بر node-js است. (SVGO مخفف بهینه سازی SVG). مجموعه ای از ابزارها و پلاگین ها ارائه می شود که آن را به ابزاری عالی تبدیل می کند که می توانید تقریباً در هر نوع گردش کاری ادغام کنید. (به زودی این ابزارها را بررسی خواهیم کرد.)

با این حال، SVGO یک اشکال دارد: به راحتی می تواند SVG شما را بشکند – به خصوص اگر متحرک یا اسکریپت شده باشد، ساختار سند تغییر می کند و در نهایت هر انیمیشن یا اسکریپت اعمال شده را می شکند.

حتی با وجود بسیاری از ابزارها و افزونه های SVGO، متأسفانه، ما هیچ راهی برای تجسم نتیجه اعمال بهینه سازی SVGO در SVG نداشتیم تا بگوییم که آیا آنها آن را خراب می کنند یا نه…

معرفی SVGOMG

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

یک یا دو هفته بعد، جیک رابط کاربری گرافیکی SVGOMG را ساخت – رابطی که به شما امکان می‌دهد با انتخاب بهینه‌سازی‌های خود، SVG را بهینه کنید و یک پیش‌نمایش زنده از ظاهر SVG خود با آن بهینه‌سازی‌های اعمال شده دریافت کنید.

اگر قبلاً از ابزار Peter استفاده کرده اید، می توانید از SVGOMG و همین انتظار را داشته باشید بیشتر.

می‌توانید یک فایل SVG آپلود کنید، کد SVG را وارد کنید، یا یک نسخه نمایشی پیش‌فرض SVG را بارگذاری کنید – اگر فقط برنامه را امتحان می‌کنید. سپس مجموعه‌ای از گزینه‌ها در سمت راست صفحه ظاهر می‌شوند (عکس بالا را ببینید). این گزینه ها نشان دهنده بهینه سازی های ساخته شده در SVGO هستند. بهینه‌سازی‌های SVGO پلاگین‌هایی هستند که می‌توانید در صورت نیاز آن‌ها را فعال و غیرفعال کنید، و SVGOMG یک راه بصری برای انجام آن در اختیار شما قرار می‌دهد.

با انتخاب بهینه‌سازی‌های خود، بخش پیش‌نمایش زنده به‌روزرسانی می‌شود و به شما امکان می‌دهد هر بهینه‌سازی را که می‌تواند SVG شما را خراب کند، شناسایی و غیرفعال کنید.

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

SVGOMG یک ابزار آنلاین است. اما اگر جیک را می شناسید، احتمالاً انتظار دارید که به صورت آفلاین نیز کار کند، با توجه به اینکه او ممکن است در وهله اول بزرگترین حامی ServiceWorker و آفلاین باشد. او در وبلاگ خود مطالب زیادی در مورد آن نوشته است. بنابراین – انتظار می رود –رابط کاربری گرافیکی به صورت آفلاین نیز کار می کند در هر مرورگری که ServiceWorker دارد. (برای یک نمای کلی از وضعیت ServiceWorker، به این صفحه سازگاری مرورگر مراجعه کنید.) پس از باز کردن برنامه (برای مثال آن را در Chrome امتحان کنید)، چند ثانیه بعد اعلانی دریافت خواهید کرد که به شما می گوید رابط کاربری گرافیکی برای کار آفلاین آماده است.

خیلی مفید است، درست است؟

سایر ابزارهای SVGO

تعداد زیادی پلاگین SVGO در دسترس هستند که بسته به گردش کار دلخواه شما می توانند به روش های مختلف استفاده شوند:

پلاگین برای Adobe Illustrator

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

SVG NOW یک پلاگین Illustrator است که بهینه سازی SVGO را به Illustrator می آورد. این یک صادرکننده SVG جایگزین هوش مصنوعی است که هدف آن بهینه سازی فایل های SVG با پردازش پس از پردازش کد SVG تولید شده با استفاده از SVGO است. این مطمئنا مفید است، اما SVG NOW پیش‌نمایش مستقیمی از نحوه تأثیرگذاری SVG توسط بهینه‌سازی‌هایی که انتخاب می‌کنید به شما نشان نمی‌دهد..

پلاگین برای Inkscape

مانند SVG NOW، SVGO – Inkscape افزونه‌ای برای Inkscape است که به شما امکان می‌دهد بسیاری از اطلاعات اضافی و بی‌فایده مانند ابرداده ویرایشگر، نظرات، عناصر پنهان، مقادیر پیش‌فرض یا کمتر از حد بهینه، و سایر موارد تولید شده توسط Inkscape را حذف کنید که می‌توان آن‌ها را بدون تأثیر بر نتیجه رندر SVG حذف یا تبدیل کرد.

پلاگین Sketch

SVGO Compressor نسخه Sketch پلاگین SVGO است که دارایی های SVG را با استفاده از SVGO درست زمانی که آنها را صادر می کنید فشرده می کند. مانند سایر ابزارهای SVGO، هیچ راهی برای بیان اینکه چگونه SVG صادر شده تحت تأثیر بهینه سازی های اعمال شده قرار می گیرد وجود ندارد.

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

توجه داشته باشید که افزونه نیاز دارد Sketch 3.8، بنابراین با نسخه‌های قدیمی‌تر برنامه کار نخواهد کرد.

GUI را بکشید و رها کنید

نوع دیگری از رابط کاربری گرافیکی برای SVGO وجود دارد – به نام رابط کاربری گرافیکی SVGO – که به شما امکان می دهد SVG های خود را بکشید و رها کنید و سپس آن SVG ها را در حال بهینه سازی کنید و نسخه های اصلی خود را با نسخه های بهینه شده جایگزین کنید.

این رابط کاربری گرافیکی برای بهینه‌سازی دسته‌ای سریع مفید است، اما با توجه به اینکه 1) نمی‌توانید SVG بهینه‌سازی شده را پیش‌نمایش کنید، مفید است. اگر می خواهید از این رابط کاربری گرافیکی استفاده کنید، قبل از بهینه سازی، مطمئن شوید که یک نسخه پشتیبان تهیه کنید.

پلاگین های Grunt و Gulp

SVGO احتمالاً بیشتر به خاطر آن شناخته شده است پلاگین Grunt، و خواهرش پلاگین Gulp. هر دو افزونه به شما امکان می دهند در صورت نیاز بهینه سازی SVGO را فعال و غیرفعال کنید.
به عنوان مثال، بهینه سازی پیش فرض SVGO حذف خواهد شد viewBox ویژگی از SVG شما. این چیزی است که باید کاملاً از آن اجتناب کنید زیرا بدون viewBox ویژگی، SVG را نمی توان پاسخگو کرد. (برای اطلاعات بیشتر در viewBox ویژگی، آموزش من را اینجا ببینید.)

برای مثال وقتی SVGO را در Grunt راه اندازی می کنید، می توانید تمام افزونه های مورد نظر خود را غیرفعال کنید. به عنوان مثال، برای غیرفعال کردن حذف viewBox، اضافه کنید removeViewBox: false به Plugins شی در فایل پیکربندی شما.

grunt.initConfig({
    svgmin: {
        options: {
            plugins: [
                {
                    removeViewBox: false
                }, {
                    removeUselessStrokeAndFill: false
                }
            ]
        },
        dist: {
            files: {
                'dist/unicorn.svg': 'app/unicorn.svg'
            }
        }
    }
});

برای اطلاعات بیشتر می توانید به مخزن Github افزونه مراجعه کنید.

عملکرد پوشه OS X

SVGO نیز همراه است عملکرد پوشه OS X که می توانید آن را به هر پوشه ای وصل کنید و سپس فایل های SVG خود را به محض قرار دادن آنها در آن پوشه، در جریان بهینه سازی کنید. باز هم نسخه های بهینه شده جایگزین نسخه های اصلی خواهند شد، پس مراقب باشید.

کلمات پایانی

مهم نیست که گردش کار شما چیست، SVGO احتمالاً می تواند به هر شکلی در آن جا شود.

من مطمئن هستم که ابزارهای بهینه سازی SVG دیگری نیز وجود دارد، اما با تمام گزینه هایی که SVGO ارائه می کند، اگر از من بپرسید، این ابزاری است که من توصیه می کنم.

این SVG ها را بهینه کنید، چیزی زیبا ایجاد کنید و آن را با جهان به اشتراک بگذارید.

ممنون که خواندید.