سند SVG

در بیشتر مواقع برای طراحی یک چیز توسط SVG از ابزارهایی مثل Sketch یا Adobe Illustrator و امثال آنها استفاده می کنیم. معمولا فایل svg که این ابزارها به عنوان خروجی به ما می دهند خیلی تمیز نیست و موارد زیادی دارد که می توانند حذف شوند. (مخصوصا نسخه های قدیمی این نرم افزارها)

به عنوان نمونه کد زیر قسمتی از یک خروجی svg توسط Illustrator است:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" enable-background="new 0 0 500 500" 
     width="500" height="500"
     xml:space="preserve">
<!-- اصل ماجرا اینجاست  -->
</svg>

خبر خوب اینکه بیشتر قسمت های این کد برای ما زايد و غیرضروری است و می توانیم آنها را حذف کنیم اما قبل از این کار بهتر است بدانیم که چه چیزی را حذف می کنیم.

خط اول پرولوگ XML است:

<?xml version="1.0" encoding="utf-8"?>

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

XML آزادی عمل زیادی دارد و ما می توانیم هر تگی که دوست داشته باشیم در XML بوجود بیاوریم. اما این آزادی عمل هزینه ای دارد و آن هم قوانین سرسخت XML است. سینتکس XML خیلی رسمی است و شدیدا باید مراقب قوانین آن باشیم. این بدین معنی است که مثلا باید همیشه تگ ها بسته شوند و یا مقادیر Attributeها حتما درون “کوتیشن مارک ” قرار بگیرند.

پرولوگی که در خط اول قرار دارد نشان می دهد که SVG صورتی از XML است و در ادامه خط encoding="utf-8" نشان می دهد که تمام محتوای درون سند به یونی‌کد نوشته شده است.

اما هر ابزاری که این فایل را بخواند مخصوصا مرورگرها این نکات را می دانند پس این خط می تواند حذف شود.

خط دوم کامنت است:

<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

همانطور که مشاهده می کنید نحوه کامنت گذاری در XML هم مشابه به HTML است. و این توضیح نشان می دهد که چه نرم افزاری این سند را بوجود آورده است. پس به این خط هم نیاز نداریم.

DOCTYPE

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

شروع سند SVG

تازه به قسمت اصلی سند رسیدیم که البته در اینجا هم هنوز مواردی برای حذف شدن وجود دارند.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" enable-background="new 0 0 500 500" 
     width="500" height="500"
     xml:space="preserve">
<!-- اصل ماجرا اینجاست  -->
</svg>

نسخه های SVG

<svg version="1.1"

شبیه بقیه زبان ها SVG نیز از سال 1991 که بوجود آمد به نسخه های جدیدی تغییر کرد که البته سینتکس آن خیلی تحت تاثیر قرار نگرفت.

همینطور زمانی که با Adobe Illustrator کار می کنید شاید به نسخه هایی از SVG به نام های Basic و Tiny برخورد کنید که بهتر است از آنها استفاده نکنید.

اگر ویژگی version از کد بالا حذف شود مرورگرها فرض می کنند که ما از آخرین نسخه SVG استفاده می کنیم.

پس این نیز حذف می شود.

id

اگر نیاز نداریم که از طریق id نوشته شده (id="Layer_1") سند SVG را در جاوااسکریپت یا سی اس اس انتخاب کنیم پس می توانیم این را نیز حذف کنیم.

x و y

اگر سندهای SVG را بصورت تو در تو بنویسیم یعنی یک <svg> را داخل یک <svg> دیگر قرار دهیم. کار ویژگی های x و y تعیین آفست و مکان SVG های تو در تو می باشد. پس اگر svg تو در تو ندارید می توانید این ویژگی ها را نیز حذف کنید.

enable-background

این هم که منسوخ شده پس اصلا نیاز به آشنایی ندارد و با چشمانی بسته و قلبی آرام حذفش می کنیم. البته قرار است که به جای آن از ویژگی isolation در CSS استفاده شود.

width و height

مخصوصا اگر به دنبال واکنشگرا کردن SVG هستیم باید این دو ویژگی را حذف کنیم. که البته در مطالب بعدی در این مورد بحث خواهیم کرد. در غیر این صورت می توانیم از این ویژگی ها برای تعیین اندازه تصویر استفاده کنیم.

xml:space="preserve"

خداروشکر این یکی نیز منسوخ شده است و به جای آن باید از ویژگی white-space در CSS استفاده شود.

کد نهایی

تا اینجای کار کد تمیز و نهایی ما به این صورت خواهد بود:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 500 500">
    <!-- اصل ماجرا اینجاست  -->
</svg>

XMLNS

در یک سند HTML امکان دارد چند گونه مختلف XML وجود داشته باشد. مثلا هم SVG و هم MathML وجود دارد. حال هر دوی اینها از تگ های XML استفاده می کنند، پس مرورگر چگونه می تواند سینتکس آنها را از هم تشخیص دهد؟

همچنین در هر سند HTML از تگ <title> یک بار و آن هم برای عنوان صفحه استفاده می شود این درحالی است که از تگ <title> بارها و بارها در یک کد SVG استفاده می شود. مرورگر تصادم بین این دو را چگونه حل می کند؟

مثل اینه یکی بیاد از ایران حرف بزنه. ما شاید بتونیم تشخصیص بدیم ولی کامپیوتر از کجا بفهمه طرف داره در مورد “کشور ایران” حرف میزنه یا “عمه ایران”؟ :)

جواب و راه حل این مساله Namespace است.

در تکه کد ما Namespace همان xmlns="http://www.w3.org/2000/svg" می باشد که شاید اینطور به نظر بیاید که کار آن این است که توسط آدرس مشخص شده اطلاعاتی در مورد SVG پیگیری شود اما نه، تنها هدف وجود Namespace بوجود آوردن یک هویت یکتا برای عنصر svg و فرزندان آن می باشد.

XLink

در SVG نیز می توان از لینک ها استفاده کرد پس دوباره همان تصادم بین تگ های SVG و HTML بوجود خواهد آمد. اینجا هم یک مشتق از Namespace خود SVG گرفته شده و برای لینک ها نیز یک Namespace ساخته شده است.

 

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">

 

بعد از نوشتن این می توان از لینک ها در SVG نیز استفاده کرد. هدف استفاده از لینک ها در SVG دو مورد است:

1. می توان لینکی به سندها و سایت های دیگر بوجود آورد:

<a xlink:href="http://mojtabaseyedi.com">
  <circle />  
</a>

مثلا می خواهیم زمانی که روی عنصر دایره کلیک کردیم به آدرس فلان سفر کنیم.

2. همانطور که می شود در HTML با مشخص کردن id برای یک عنصر از طریق عنصر لینک به سمت آن عنصر پرید. در SVG نیز می توان از طریق id و عنصر لینک به قسمت دیگری از سند SVG اشاره کرد.

جدا از موردی که گفته شد کاربرد دیگر این روش این است که فرض کنید یک آیکون را به عنوان یک symbol در SVG تعریف می کنیم. حال هرجا که بخواهیم بارها و بارها می توانیم به روش زیر از آن آیکون استفاده کنیم:

<svg class="icon" aria-label="trash" width="50" height="50">
        <title>trash</title>
        <use xlink:href="#trash" />
    </svg>
</a>
…

...

<svg style="display: none;">
    <symbol id="trash" viewBox="0 0 50 50">
        <path d="…"/>
    </symbol>
</svg>

توجه داشته باشید که در این مورد خاص می توانیم Namespace عنصر svg را ننویسیم.

xmlns و xlink تنها Namespaceهایی هستند که اگر وجود نداشته باشند SVG در برخی مرورگرها نمایش داده نمی شود.

نرم افزارهای مختلفی که فایل svg می سازند معمولا ویژگی های زیادی به تگ ها SVG با Namespace خودشان اضافه می کنند که می توانید آنها را حذف کنید بدون اینکه مشکلی برای نمایش فایل شما در مرورگر بوجود بیاید.

SVG 2

نسخه فعلی که بیشتر در مورد SVG بحث و استفاده می شود نسخه 1.1 است. اما در آینده نزدیک SVG2 خواهد آمد که در آن به عنوان مثال xlink منسوخ شده است و می توان لینک ها را به همان صورتی که در HTML می نویسیم داشته باشیم.