6 خطای رایج SVG (و نحوه رفع آنها)

اخیراً شخصی از من پرسید که چگونه می توانم به اشکال زدایی SVG های درون خطی نزدیک شوم. از آنجایی که بخشی از DOM است، می توانیم هر SVG درون خطی را در هر DevTools مرورگری بررسی کنیم. و به همین دلیل، ما این توانایی را داریم که همه چیز را بررسی کنیم و هرگونه مشکل یا فرصت بالقوه برای بهینه سازی SVG را کشف کنیم.

اما گاهی اوقات، ما حتی نمی توانیم SVG های خود را اصلا ببینیم. در این موارد، شش مورد خاص وجود دارد که من در هنگام اشکال زدایی به دنبال آنها هستم.

1. viewBox ارزش

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

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

ساده ترین راه برای رفع این مشکل؟ اضافه کردن overflow="visible" به SVG، خواه در شیوه نامه ما باشد، به صورت خطی روی style ویژگی یا مستقیماً به عنوان یک ویژگی ارائه SVG. اما اگر الف را نیز اعمال کنیم background-color به SVG یا اگر عناصر دیگری در اطراف آن داشته باشیم، ممکن است اوضاع کمی بد به نظر برسد. در این صورت بهترین گزینه ویرایش آن خواهد بود viewBox برای نشان دادن بخشی از سیستم مختصات که پنهان شده است:

چند چیز اضافی در مورد وجود دارد viewBox که ارزش پوشش دادن را دارند در حالی که ما در مورد موضوع هستیم:

چطور؟ viewBox کار می کند؟

SVG یک بوم بی‌نهایت است، اما ما می‌توانیم آنچه را که می‌بینیم و نحوه دیدن آن را از طریق ویوپورت و viewBox.

La درگاه مشاهده یک قاب پنجره روی بوم بی نهایت است. ابعاد آن توسط تعریف می شود width و height ویژگی ها، یا در CSS با مربوطه width و height خواص ما می‌توانیم هر واحد طولی را که می‌خواهیم تعیین کنیم، اما اگر اعداد بدون واحد ارائه کنیم، آنها به‌طور پیش‌فرض روی پیکسل هستند.

La viewBox با چهار مقدار تعریف می شود. دو مورد اول نقطه شروع در گوشه سمت چپ بالا هستند (x و y مقادیر، اعداد منفی مجاز). من اینها را ویرایش می کنم تا تصویر را دوباره قاب کنم. دو مورد آخر، عرض و ارتفاع سیستم مختصات در داخل نما هستند - اینجا جایی است که می‌توانیم مقیاس شبکه را ویرایش کنیم (که در بخش به آن خواهیم پرداخت. زوم کردن).

در اینجا نشانه گذاری ساده شده SVG را نشان می دهد viewBox و width و height هر دو صفت بر روی تنظیم می شوند <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

تغییر شکل مجدد

بنابراین، این:

<svg viewBox="0 0 700 700">

...نقشه های این:

<svg viewBox="start-x-axis start-y-axis width height">

ویوپورتی که می بینیم از جایی شروع می شود 0 در محور x و 0 در محور y ملاقات می کنند.

با تغییر این:

<svg viewBox="0 0 700 700">

…به این:

<svg viewBox="300 200 700 700">

... عرض و ارتفاع ثابت می ماند (700 هر واحد)، اما شروع سیستم مختصات اکنون در پایان است 300 نقطه روی محور x و 200 در محور y

در ویدیوی زیر یک رنگ قرمز اضافه می کنم <circle> به SVG با مرکز آن در 300 نقطه روی محور x و 200 در محور y توجه کنید که چگونه تغییر می کند viewBox مختصات به مقادیر یکسان همچنین محل دایره را در گوشه سمت چپ بالای کادر تغییر می دهد در حالی که اندازه رندر شده SVG ثابت می ماند (700×700). تمام کاری که من انجام دادم این بود که چیزها را با آن "قالب مجدد" کنم viewBox.

زوم کردن

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

بیایید ببینیم وقتی این پارامترها را تغییر می دهیم در Illustrator چه اتفاقی می افتد. تابلو هنری است viewport که با یک مربع سفید 700px نشان داده شده است. هر چیز دیگری خارج از آن منطقه، بوم بی نهایت SVG ما است و به طور پیش فرض بریده می شود.

شکل 1 زیر یک نقطه آبی را نشان می دهد 900 در امتداد محور x و 900 در امتداد محور y اگر دو مورد آخر را عوض کنم viewBox مقادیر از 700 به 900 مثل این:

<svg viewBox="300 200 900 900" width="700" height="700">

... سپس نقطه آبی تقریباً به طور کامل به نظر می رسد، همانطور که در شکل 2 زیر مشاهده می شود. تصویر ما کوچک شده است زیرا مقادیر viewBox را افزایش دادیم، اما ابعاد واقعی عرض و ارتفاع SVG ثابت باقی ماندند و نقطه آبی راه خود را به ناحیه بدون برش نزدیک‌تر کرد.

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

2. گمشده width و height

یکی دیگر از موارد متداول دیگری که در هنگام اشکال زدایی SVG درون خطی به آن توجه می کنم این است که آیا نشانه گذاری حاوی این است width or height ویژگی های. این در بسیاری از موارد مشکل بزرگی نیست، مگر اینکه SVG داخل یک ظرف با موقعیت مطلق یا یک ظرف انعطاف پذیر باشد (همانطور که سافاری SVG را محاسبه می کند. width ارزش با 0px بجای auto). مستثنی کردن width or height در این موارد ما را از دیدن تصویر کامل، همانطور که می‌توانیم می‌بینیم، باز می‌دارد باز کردن این نسخه ی نمایشی CodePen و مقایسه آن در کروم، سافاری و فایرفاکس (برای نمایش بزرگتر روی تصاویر ضربه بزنید).

راه حل؟ عرض یا ارتفاع را اضافه کنید، چه به عنوان یک ویژگی ارائه، چه به صورت خطی در ویژگی سبک یا در CSS. از استفاده از ارتفاع به تنهایی خودداری کنید، به خصوص زمانی که روی آن تنظیم شده است 100% or auto. راه حل دیگر این است که حق را تنظیم کنید و مقادیر سمت چپ.

می توانید با آنها بازی کنید قلم زیر و گزینه های مختلف را با هم ترکیب کنید.

3. سهوی fill و stroke رنگ

همچنین ممکن است که ما رنگ را به آن اعمال کنیم <svg> برچسب، چه یک سبک درون خطی باشد یا از CSS. این خوب است، اما ممکن است مقادیر رنگ دیگری در سرتاسر نشانه گذاری وجود داشته باشد یا سبک هایی که با رنگ تنظیم شده در تضاد هستند. <svg>، باعث نامرئی شدن قطعات می شود.

به همین دلیل است که من تمایل دارم به دنبال آن باشم fill و stroke ویژگی های موجود در نشانه گذاری SVG و پاک کردن آنها. ویدیوی زیر یک SVG را نشان می دهد که در CSS با رنگ قرمز استایل داده شده است fill. چند مورد وجود دارد که بخش‌هایی از SVG مستقیماً در علامت‌گذاری که برای آشکار کردن قطعات گمشده حذف کردم، با رنگ سفید پر می‌شوند.

4. مفقود شدن شناسنامه ها

این یکی ممکن است بسیار بدیهی به نظر برسد، اما تعجب خواهید کرد که هر چند وقت یکبار آن را می بینم. فرض کنید ما یک فایل SVG در Illustrator ساخته‌ایم و در مورد نام‌گذاری لایه‌هایمان بسیار کوشا بودیم تا هنگام صادرات فایل، شناسه‌های تطبیق خوبی در نشانه‌گذاری دریافت کنید. و بیایید بگوییم که قصد داریم با اتصال به آن شناسه‌ها، به آن SVG در CSS استایل دهیم.

این یک راه خوب برای انجام کارها است. اما موارد زیادی وجود دارد که من مشاهده کرده‌ام که فایل SVG برای بار دوم به همان مکان صادر شده و شناسه‌ها متفاوت است، معمولاً هنگام کپی/پیست کردن مستقیم وکتورها. شاید یک لایه جدید اضافه شده باشد، یا یکی از لایه های موجود تغییر نام داده باشد یا چیزی مشابه. در هر صورت، قوانین CSS دیگر با شناسه‌های نشانه‌گذاری SVG مطابقت ندارند و باعث می‌شوند SVG متفاوت از آنچه انتظار دارید ارائه شود.

در فایل‌های بزرگ SVG ممکن است پیدا کردن آن شناسه‌ها مشکل باشد. این زمان خوبی است برای باز کردن DevTools، بررسی آن قسمت از گرافیک که کار نمی کند و ببینید آیا آن شناسه ها هنوز مطابقت دارند یا خیر.

بنابراین، می‌توانم بگویم ارزش دارد که یک فایل SVG صادر شده را در یک ویرایشگر کد باز کنید و قبل از تعویض چیزها، آن را با نسخه اصلی مقایسه کنید. برنامه هایی مانند Illustrator، Figma و Sketch هوشمند هستند، اما این بدان معنا نیست که ما مسئول بررسی آنها نیستیم.

5. چک لیست برای برش و پوشش

اگر یک SVG به طور غیرمنتظره ای بریده شود و viewBox درست است، من معمولاً به CSS نگاه می کنم clip-path or mask ویژگی هایی که ممکن است با تصویر تداخل داشته باشند. وسوسه انگیز است که به نشانه گذاری درون خطی نگاه کنید، اما خوب است به یاد داشته باشید که یک ظاهر طراحی SVG ممکن است در جای دیگری اتفاق بیفتد.

برش و ماسک کردن CSS به ما اجازه می دهد تا بخش هایی از یک تصویر یا عنصر را "پنهان" کنیم. در SVG، <clipPath> یک عملیات برداری است که بخش هایی از یک تصویر را بدون هیچ نتیجه ای در نیمه برش می دهد. را <mask> تگ یک عملیات پیکسلی است که امکان شفافیت، جلوه های نیمه شفاف و تار شدن لبه ها را فراهم می کند.

این یک چک لیست کوچک برای اشکال زدایی مواردی است که در آن Clipping و masking درگیر است:

• مطمئن شوید که مسیر برش (یا ماسک) و گرافیک با یکدیگر همپوشانی دارند. قسمت های همپوشانی آن چیزی است که نمایش داده می شود.
• اگر مسیر پیچیده‌ای دارید که گرافیک شما را قطع نمی‌کند، سعی کنید تبدیل‌ها را تا زمانی که مطابقت داشته باشند اعمال کنید.
• شما همچنان می توانید کد داخلی را با DevTools بررسی کنید، حتی اگر <clipPath> or <mask> ارائه نشده اند، پس از آن استفاده کنید!
• نشانه گذاری را در داخل کپی کنید <clipPath> و <mask> و قبل از بستن آن را بچسبانید </svg> برچسب زدن سپس a را اضافه کنید fill به آن اشکال و مختصات و ابعاد SVG را بررسی کنید. اگر هنوز تصویر را نمی بینید، سعی کنید آن را اضافه کنید overflow="hidden" به <svg> برچسب.
• بررسی کنید که الف منحصر به فرد شناسه برای <clipPath> or <mask>، و اینکه همان شناسه برای اشکال یا گروهی از اشکالی که بریده شده یا ماسک شده اند اعمال می شود. یک شناسه ناهماهنگ ظاهر را خراب می کند.
• وجود اشتباهات تایپی در علامت گذاری بین <clipPath> or <mask> برچسب ها
• fill, stroke, opacity، یا برخی سبک های دیگر که بر روی عناصر داخل اعمال می شود <clipPath> بی فایده هستند - تنها بخش مفید هندسه منطقه پر آن عناصر است. به همین دلیل است که اگر از a <polyline> به عنوان یک رفتار خواهد کرد <polygon> و در صورت استفاده از a <line> هیچ اثر بریده ای نخواهید دید.
• اگر بعد از اعمال a تصویر خود را نمی بینید <mask>، مطمئن شوید که fill محتوای پوشش کاملاً سیاه نیست. درخشندگی عنصر پوشاننده کدورت گرافیک نهایی را تعیین می کند. می‌توانید قسمت‌های روشن‌تر را ببینید و قسمت‌های تیره‌تر محتوای تصویرتان را پنهان می‌کنند.

می توانید با عناصر ماسک شده و بریده شده بازی کنید این قلم.

6. فضای نام

آیا می دانستید که SVG یک زبان نشانه گذاری مبتنی بر XML است؟ خوب، این است! فضای نام برای SVG بر روی تنظیم شده است xmlns صفت:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

چیزهای زیادی برای دانستن در مورد فاصله نام در XML وجود دارد و MDN دارای یک آغازگر عالی بر روی آن است. کافی است بگوییم، فضای نام زمینه را برای مرورگر فراهم می کند و به آن اطلاع می دهد که نشانه گذاری مختص SVG است. ایده این است که وقتی بیش از یک نوع XML در یک فایل مانند SVG و XHTML وجود دارد، فضاهای نام به جلوگیری از درگیری ها کمک می کنند. این مسئله در مرورگرهای مدرن بسیار کمتر رایج است، اما می‌تواند به توضیح مشکلات رندر SVG در مرورگرهای قدیمی‌تر یا مرورگرهایی مانند Gecko که در تعریف Doctypes و فضاهای نام سختگیر هستند کمک کند.

مشخصات SVG 2 نیازی به فاصله نامی ندارد هنگام استفاده از نحو HTML ولی بسیار مهم است اگر پشتیبانی از مرورگرهای قدیمی در اولویت است - به علاوه، اضافه کردن آن ضرری ندارد. به این ترتیب، زمانی که <html> عناصر xmlns ویژگی تعریف شده است، در آن موارد نادر تضاد نخواهد داشت.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

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

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

وقتی فضای نام داخل SVG را در ویژگی پس‌زمینه حذف می‌کنیم، تصویر ناپدید می‌شود:

یکی دیگر از پیشوندهای رایج فضای نام این است xlink:href. ما هنگام ارجاع به بخش‌های دیگر SVG مانند: الگوها، فیلترها، انیمیشن‌ها یا گرادیان‌ها از آن بسیار استفاده می‌کنیم. توصیه این است که شروع به تعویض آن کنید href همانطور که یکی دیگر از SVG 2 منسوخ شده است، اما ممکن است مشکلات سازگاری با مرورگرهای قدیمی وجود داشته باشد. در این صورت می توانیم از هر دو استفاده کنیم. فقط به یاد داشته باشید که فضای نام را درج کنید xmlns:xlink="http://www.w3.org/1999/xlink" اگر هنوز استفاده می کنید xlink:href.

مهارت های SVG خود را ارتقا دهید!

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

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

چند نفر را پیشنهاد می کنم برای خوبی های مربوط به SVG دنبال کنید:

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/