گرافیک های برداری را در سایت ریسپانسیو خود پخش کنید

ایجاد محتوای موبایلی که خیره کننده باشد به معنای متعادل کردن میزان داده های دانلود شده در برابر حداکثر تأثیر بصری است. گرافیک برداری روشی عالی برای ارائه نتایج بصری خیره کننده با استفاده از حداقل پهنای باند است.

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

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

SVG یک راه عالی برای ارائه نقشه های خطی مبتنی بر برداری است و مکملی عالی برای بیت مپ است، دومی برای تصاویر با صدای پیوسته مناسب تر است.

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

ابزارهای محبوب نویسندگی مانند برنامه Drawing در Google Drive، Inkscape، Illustrator، Corel Draw و بسیاری دیگر، SVG تولید می‌کنند، بنابراین راه‌های زیادی برای تولید محتوا وجود دارد. ما راه‌هایی را برای استفاده از دارایی‌های SVG، به‌علاوه چند نکته بهینه‌سازی برای پیشبرد کار بررسی خواهیم کرد.

اصول مقیاس بندی

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

لوگوی HTML5 در زیر نشان داده شده است - و شما حدس زدید، از یک فایل SVG منشاء می گیرد.

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

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

اما صبر کنید، چیزهای بیشتری وجود دارد - آرم HTML5 فقط 1427 بایت است! بله، این به قدری کوچک است که به سختی برنامه داده تلفن همراه را هنگام بارگیری آن کاهش می دهد، که باعث می شود بارگیری سریع انجام شود و این باعث می شود که برای کاربران شما ارزان و سریع باشد!

یکی دیگر از چیزهای خوب در مورد فایل های SVG این است که می توان آنها را GZIP فشرده کرد تا بیشتر آنها را کوچک کند. وقتی SVG را به این روش فشرده می‌کنید، پسوند فایل باید به '.svgz' تغییر یابد. در مورد لوگوی HTML5، زمانی که فشرده می شود، تنها به 663 بایت کاهش می یابد - و اکثر مرورگرهای مدرن به راحتی آن را مدیریت می کنند!

با فایل مثال ما در برخی از جدیدترین دستگاه‌ها، چیزی شبیه به مزیت 60 برابری با استفاده از داده‌های برداری فشرده مشاهده می‌کنیم! همچنین توجه داشته باشید که این مقایسه‌ها بین JPEG و SVG به جای PNG انجام می‌شود. با این حال، فرمت JPEG یک فرمت با اتلاف است که کیفیت پایین‌تری نسبت به SVG یا PNG دارد. اگر بخواهیم از PNG استفاده کنیم، مزیت آن بیش از 80 برابر خواهد بود که خیره کننده است!

اما مسلما PNG و JPEG برابر نیستند. تعدادی از نکات بهینه سازی به شما می گوید که به جای PNG از JPEG استفاده کنید، اما این همیشه ایده خوبی نیست. به تصاویر زیر نگاهی بیندازید. تصویر سمت چپ یک تصویر PNG از قسمت سمت راست بالای لوگوی HTML5 است که 6 برابر بزرگ شده است. تصویر سمت راست یکسان است اما با JPEG کدگذاری شده است.

به راحتی می توان فهمید که صرفه جویی در اندازه فایل در JPEG هزینه دارد، با دست ساخته های رنگی در لبه های تیز - احتمالا باعث می شود شبکیه چشم شما فکر کند که به عینک نیاز دارد:-) اگر منصفانه باشیم، JPEG برای عکس ها بهینه شده است، و به همین دلیل است که اینطور نیست. برای هنر برداری خوب است. در هر صورت، نسخه SVG از نظر کیفیت مانند PNG است، بنابراین در همه حساب ها برنده است - هم اندازه فایل و هم وضوح.

ساخت پس زمینه وکتور

بیایید نگاهی به نحوه استفاده از یک فایل برداری به عنوان پس زمینه یک صفحه بیندازیم. یک راه آسان این است که فایل پس زمینه خود را با استفاده از موقعیت یابی ثابت CSS اعلام کنید:

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

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

سپس، البته، ما می خواهیم مقداری محتوا را در پس زمینه قرار دهیم.

اما همانطور که می بینید، نتیجه کمتر از حد ایده آل است زیرا ما نمی توانیم متن را بخوانیم. پس چه کار کنیم؟

تنظیم پس زمینه برای زیباتر به نظر رسیدن

کاری که باید انجام دهیم این است که تمام رنگ های تصویر پس زمینه روشن تر باشد. این به راحتی با استفاده از ویژگی Opacity CSS - یا استفاده از opacity در خود فایل SVG به دست می آید. شما می توانید این کار را با افزودن این کد به محتوای CSS خود انجام دهید:

#bg {
  opacity: 0.2;
}

این به شما نتیجه ای مانند این می دهد:

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

راه حل بهتر

تغییر رنگ در محتوای اصلی SVG به مراتب بهتر از تنظیم opacity با CSS است. در اینجا لوگوی HTML5 ما اصلاح شده است تا با تغییر رنگ‌های مورد استفاده، محو به نظر برسد و در این فرآیند به طور کلی از ویژگی کدورت اجتناب شود. بنابراین تصویر پس‌زمینه زیر با نتیجه تغییر شفافیت یکسان به نظر می‌رسد، اما در واقع بسیار سریع‌تر رنگ‌آمیزی می‌کند و در زمان CPU ما صرفه‌جویی می‌کند و باعث صرفه‌جویی در عمر باتری گرانبها در این فرآیند می‌شود.

بنابراین اکنون درک مناسبی از برخی اصول اساسی داریم، بیایید به برخی ویژگی های دیگر برویم.

استفاده کارآمد از گرادیان ها

فرض کنید می خواهیم یک دکمه بسازیم. می توانیم با ایجاد یک مستطیل با گوشه های گرد زیبا شروع کنیم. سپس می‌توانیم یک گرادیان خطی خوب اضافه کنیم تا به دکمه بافت خوبی بدهد. کد انجام این کار می تواند چیزی شبیه به:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

دکمه حاصل به چیزی شبیه به این ختم می شود:

توجه کنید که چگونه گرادیانی که اضافه کرده ایم از چپ به راست می رود. این جهت گرادیان پیش فرض در SVG است. اما به چند دلیل مختلف می توانیم بهتر عمل کنیم: زیبایی شناسی و عملکرد. بیایید سعی کنیم جهت گرادیان را تغییر دهیم تا کمی زیباتر به نظر برسد. تنظیم ویژگی های 'x1'، 'y1'، 'x2' و 'y2' روی گرادیان خطی، جهت رنگ پر را کنترل می کند.

تنظیم فقط ویژگی 'y2' به ما امکان می دهد شیب را به صورت مورب تغییر دهیم. بنابراین این کد کوچک تغییر می کند:

<linearGradient id="blueshiny" y2="1">

به ما ظاهر متفاوتی برای دکمه ما می دهد، در نهایت مانند تصویر زیر می شود.

همچنین می‌توانیم با این تغییر کد کوچک، گرادیان را از بالا به پایین تغییر دهیم:

<linearGradient id="blueshiny" x2="0" y2="1">

و در نهایت مانند تصویر زیر به نظر می رسد.

پس این همه بحث در مورد زوایای مختلف گرادیان که می‌پرسید چیست؟

خوب معلوم می شود که آخرین مثال - نمونه ای که شیب آن از بالا به پایین اجرا می شود، در اکثر دستگاه ها سریع ترین ترسیم را دارد. این یک راز بسیار ناشناخته در میان متخصصان گرافیکی است که کد مرورگر را می نویسند که شیب های عمودی (از بالا به پایین) تقریباً به همان سرعت یک رنگ ثابت رنگ می کنند. (دلیل این است که نقاشی یک شی در خطوط افقی پایین صفحه انجام می شود - و ذات کد ترسیم متوجه می شود که رنگ در هر خط تغییر نمی کند و بنابراین آن را بهینه می کنند).

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

اگر با این دانش جدید گرادیان واقعاً ماجراجویانه احساس می‌کنیم، شاید بتوانیم با افزودن کد زیر، یک گرادیان جالب در پشت لوگوی HTML5 خود اضافه کنیم:

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

کد بالا یک گرادیان خطی عمودی محو شده را به پس زمینه لوگوی HTML5 ما اضافه می کند تا رنگ ظریف چند رنگی را ارائه دهد که سریع اجرا می شود - به همان سرعتی که یک پس زمینه رنگی تک رنگ اجرا می شود.

اگر محتوا را در یک مرورگر دسکتاپ بارگذاری کنید و اندازه آن را به نسبت های شدید تغییر دهید، نوارهای سفیدی را در بالا/پایین یا سمت چپ/راست خواهید دید. به هر حال، پس از تغییرات کد ایجاد شده در بالای پس‌زمینه به‌صورت زیر خواهد بود:

با سهولت متحرک سازی کنید

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

به عنوان مثال، لوگوی رنگارنگ HTML5 خود را با تغییر تعریف گرادیان خطی به کد زیر اصلاح می‌کنیم:

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

برای مشاهده نتیجه این تغییرات بالا به تصویر زیر نگاه کنید.

کد در حال تغییر رنگ های گرادیان خطی ما از طریق تمام توقف های رنگی مختلف است که در یک چرخه پیوسته که 20 ثانیه طول می کشد تا اجرا شود. اثر آن این است که شیب به نظر می رسد که در حال حرکت به سمت بالا صفحه در یک حرکت مداوم است که هرگز متوقف نمی شود.

زیبایی این است که هیچ اسکریپت مورد نیاز وجود ندارد! به همین دلیل است که به عنوان یک تصویر ارجاع شده از این صفحه اجرا می شود، اما همچنین با از بین بردن نیاز به اسکریپت، بار کاری را در CPU موبایل کاهش می دهد.

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

یک نکته وجود دارد: برخی از مرورگرها به هیچ وجه این سبک از انیمیشن را انجام نمی دهند، اما در این صورت شما همچنان یک پس زمینه رنگی زیبا خواهید داشت اما تغییر نمی کند - این کار را می توان با استفاده از اسکریپت (و requestAnimationFrame ) حل کرد. ) اما این کمی فراتر از این مقاله است.

نکته دیگری که باید به آن توجه کنید این است که این فایل SVG فشرده نشده تنها 2922 بایت است - بسیار کوچک برای ارائه چنین جلوه گرافیکی غنی، که کاربران و آن برنامه های داده را در این فرآیند راضی نگه می دارد.

از اینجا به کجا؟

موارد زیادی وجود دارد که SVG کمتر از حد ایده آل است، عکس ها و فیلم ها در فرمت های دیگر بهتر نمایش داده می شوند. متن یکی دیگر از مواردی است که در آن HTML بومی و CSS به طور کلی بسیار بهتر کار می کنند. با این حال، به عنوان یک ابزار در زرادخانه برای آثار هنری خط کشیده می تواند انتخاب ایده آلی باشد.

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

سایر منابع خوب

• Inkscape یک برنامه طراحی منبع باز است که از SVG به عنوان فرمت فایل خود استفاده می کند.
• Open Clip Art یک کتابخانه کلیپ آرت منبع باز بزرگ که حاوی هزاران تصویر SVG است.
• صفحه W3C SVG حاوی پیوندهایی به مشخصات، منابع و غیره.
• Raphaël یک کتابخانه جاوا اسکریپت است که یک API مناسب برای ترسیم و متحرک کردن محتوای SVG با بازگشت عالی برای مرورگرهای قدیمی ارائه می دهد.
• منابع SVG از دانشگاه اسلیپری راک - شامل پیوندی به یک پرایمر عالی SVG است.