CSS با SVG: کاربرد دنیای واقعی

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

قالب مقیاس پذیر گرافیک (SVG) از سال 1999 یک استاندارد باز است ، اما پس از انتشار اینترنت اکسپلورر 9 ، استفاده از مرورگر در سال 2011 عملی شد. امروز ، SVG به خوبی در تمام مرورگرها پشتیبانی می شود، اگرچه ویژگی های پیشرفته تر می توانند متفاوت باشند.

مزایای SVG

فرمت های تصویر Bitmap مانند WebP ، PNG ، JPG و GIF رنگ پیکسل های منفرد را تعریف می کنند. آ 100 × 100 تصویر PNG به 10،000 پیکسل نیاز دارد. هر پیکسل به چهار بایت برای قرمز ، سبز ، آبی و شفافیت نیاز دارد ، بنابراین پرونده حاصل 40000 بایت است (به علاوه کمی بیشتر برای فراداده). فشرده سازی برای کاهش اندازه پرونده اعمال می شود: PNG و GIF از فشرده سازی بدون از دست دادن ZIP استفاده می کنند ، در حالی که JPG فاقد ضرر است و جزئیات کمتر قابل توجه را از بین می برد (WebP می تواند از هر دو روش استفاده کند).

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

SVG ها تصاویر برداری هستند که در XML تعریف شده اند. نقاط ، خطوط ، منحنی ها ، مسیرها ، بیضی ها ، مستطیل ها ، متن و … هستند کشیده شده روی بوم SVG. مثلا:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle cx="400" cy="300" r="250" stroke-width="20" stroke="#f00" fill="#ff0" />
</svg>

viewBox فضای مختصاتی را تعریف می کند. در این مثال ، یک 800 × 600 منطقه از موقعیت شروع می شود 0,0 دارای یک دایره زرد با حاشیه قرمز و یک است 250 شعاع واحد رسم شده در مرکز:

اینها مزایای بردارها نسبت به نقشه های بیت است:

• SVG بالا کمتر از 150 بایت استفاده می کند ، که به طور قابل توجهی کوچکتر از PNG یا JPG معادل است
• پس زمینه های SVG به طور پیش فرض شفاف هستند
• تصویر می تواند بدون از دست دادن کیفیت در هر اندازه مقیاس بندی شود
• کد / عناصر SVG می توانند در سرور (با استفاده از هر زبانی) یا مرورگر (با استفاده از CSS و JavaScript) تولید و دستکاری شوند.
• از نظر قابلیت دسترسی و سئو ، متن و عناصر طراحی قابل خواندن توسط ماشین هستند.

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

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

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

کد بدست آمده را معمولاً می توان با استفاده بیشتر ساده و به حداقل رساند SVGO (افزونه ها برای اکثر ابزارهای ساخت موجود هستند) ، یا جیک آرچیبولد ابزار تعاملی SVGOMG.

SVG ها به عنوان تصاویر ساکن

هنگامی که در HTML استفاده می شود <img> برچسب یا CSS background-url، SVG ها یکسان با bitmap عمل می کنند:

<img src="myimage.svg" alt="a vector graphic" />

.myelement {
  background-image: url("mybackground.svg");
}

مرورگر اسکریپت ها ، پیوندها و سایر ویژگی های تعاملی تعبیه شده در پرونده SVG را غیرفعال می کند. می توانید SVG را با استفاده از CSS به روشی مشابه سایر تصاویر با استفاده از آن دستکاری کنید transform، filters، و غیره نتایج اغلب از bitmaps برتر هستند زیرا SVG ها را می توان بی نهایت مقیاس بندی کرد.

زمینه های SVG خط خورده CSS

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

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat;
}

رمزگذاری متنی استاندارد UTF-8 (به جای base64) قابل استفاده است ، بنابراین ویرایش تصویر SVG در صورت لزوم آسان تر است.

این فرآیند معمولاً با استفاده از ابزاری مانند پلاگین دارایی PostCSS.

CSS با SVG: تصاویر پاسخگو SVG

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

با این حال ، SVG مورد استفاده در <img> برچسب زدن ممکن است ابعاد ضمنی ندارند. شما ممکن است کشف کنید max-width صفر محاسبه می شود و تصویر کاملاً ناپدید می شود. برای رفع مشکل ، از پیش فرض اطمینان حاصل کنید width و height در تعریف شده است <svg> برچسب:

<svg xmlns="https://www.w3.org/2000/svg" width="400" height="300">

تصاویر SVG با خط HTML

SVG ها را می توان مستقیماً در نشانه گذاری HTML قرار داد. سپس تصویر بخشی از DOM می شود و می توان با استفاده از CSS و JavaScript دستکاری کرد:

<p>SVG is inlined directly into the HTML:</p>

<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8">
  <path d="M70.9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70.9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17.8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z"/>
  <path d="M319 35.4v17.8h17.6V35.4H319zm17.6 17.8v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53.2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h-35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z"/>
</svg>

<p>The SVG is now part of the DOM.</p>

در این مورد، width یا height ویژگی ها لازم نیستند زیرا می توان مستقیماً ابعاد را کنترل کرد. مثلا:

#invader {
  display: block;
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}

با این حال ، افزودن ابعاد ، اندازه SVG را به هنگام استفاده نکردن CSS ، به طور نامناسب تضمین می کند.

قلم را ببینید
HTML-Inline SVG توسط SitePoint (SitePoint)
بر CodePen.

عناصر SVG مانند مسیرها ، دایره ها ، مستطیل ها و غیره را می توان توسط انتخاب کنندگان CSS هدف قرار داد و با استفاده از ویژگی های استاندارد SVG به عنوان خصوصیات CSS. مثلا:

circle {
  stroke-width: 20;
  stroke: #f00;
  fill: #ff0;
}

این ویژگی هر ویژگی تعریف شده در SVG را نادیده می گیرد زیرا CSS از ویژگی بالاتری برخوردار است. یک ظاهر طراحی شده SVG CSS چندین مزیت را به همراه دارد:

• سبک سازی مبتنی بر ویژگی را می توان به طور کامل از SVG حذف کرد تا وزن صفحه کاهش یابد
• از یک ظاهر طراحی شده CSS می توان در هر تعداد SVG در هر تعداد صفحه استفاده مجدد کرد
• کل SVG یا عناصر جداگانه تصویر می توانند اثرات CSS را با استفاده از آنها اعمال کنند :hover، transition، animation و غیره.

SVG Sprites

یک فایل SVG منفرد می تواند حاوی هر تعداد عکس مجزا باشد. به عنوان مثال ، این folders.svg پرونده شامل آیکون های پوشه تولید شده توسط IcoMoon. هر یک در یک جداگانه موجود است <symbol> کانتینر دارای شناسه ای که می تواند هدف قرار گیرد:

<svg xmlns="https://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-folder" viewBox="0 0 32 32">
      <title>folder</title>
      <path d="M14 4l4 4h14v22h-32v-26z"></path>
    </symbol>
    <symbol id="icon-folder-open" viewBox="0 0 32 32">
      <title>open</title>
      <path d="M26 30l6-16h-26l-6 16zM4 12l-4 18v-26h9l4 4h13v4z"></path>
    </symbol>
    <symbol id="icon-folder-plus" viewBox="0 0 32 32">
      <title>plus</title>
      <path d="M18 8l-4-4h-14v26h32v-22h-14zM22 22h-4v4h-4v-4h-4v-4h4v-4h4v4h4v4z"></path>
    </symbol>
    <symbol id="icon-folder-minus" viewBox="0 0 32 32">
      <title>minus</title>
      <path d="M18 8l-4-4h-14v26h32v-22h-14zM22 22h-12v-4h12v4z"></path>
    </symbol>
    <symbol id="icon-folder-download" viewBox="0 0 32 32">
      <title>download</title>
      <path d="M18 8l-4-4h-14v26h32v-22h-14zM16 27l-7-7h5v-8h4v8h5l-7 7z"></path>
    </symbol>
    <symbol id="icon-folder-upload" viewBox="0 0 32 32">
      <title>upload</title>
      <path d="M18 8l-4-4h-14v26h32v-22h-14zM16 15l7 7h-5v8h-4v-8h-5l7-7z"></path>
    </symbol>
  </defs>
</svg>

پرونده SVG می تواند به عنوان یک منبع ذخیره شده خارجی در یک صفحه HTML ارجاع شود. به عنوان مثال ، در اینجا نحوه نمایش نماد پوشه در نشان داده شده است #icon-folder:

<svg class="folder" viewBox="0 0 100 100">
  <use xlink:href="folders.svg#icon-folder"></use>
</svg>

و در اینجا نحوه سبک سازی آن با CSS آورده شده است:

svg.folder { fill: #f7d674; }

این روش دو اشکال دارد:

1. در اینترنت اکسپلورر شکست می خورد.
2. یک ظاهر طراحی شده CSS فقط مربوط به <svg> عنصر حاوی <use>. fill در اینجا هر عنصر از نماد را به یک رنگ می کند.

برای حل این مشکلات ، SVG sprite را می توان در HTML صفحه جاسازی کرد و سپس با استفاده از آن پنهان کرد display: none یا تکنیک های مشابه با مراجعه به شناسه می توانید یک نماد جداگانه قرار دهید:

<svg><use xlink:href="#icon-folder"></use></svg>

قلم را ببینید
جن های SVG توسط SitePoint (SitePoint)
بر CodePen.

این در همه مرورگرهای مدرن از جمله IE9 + کار می کند و سبک سازی عناصر جداگانه در هر نماد با استفاده از CSS امکان پذیر است.

متأسفانه ، مجموعه SVG دیگر ذخیره نمی شود و باید در هر صفحه ای که به یک نماد نیاز است ، تولید شود. راه حل (به این راه حل!) بارگذاری SVG با استفاده از Ajax است – که سپس ذخیره می شود – و آن را به صفحه تزریق کنید. IcoMoon بارگیری یک کتابخانه جاوا اسکریپت را فراهم می کند ، یا می توانید استفاده کنید SVG برای همه.

تأثیرات SVG بر محتوای HTML

SVG مدتهاست پشتیبانی می کند:

• ماسک: تغییر دید قسمتهای یک عنصر
• قطع: حذف بخشهای یک عنصر بنابراین یک جعبه معمولی استاندارد به هر شکل دیگری در می آید
• فیلترها: جلوه های گرافیکی مانند تاری ، روشنایی ، سایه ها و غیره

این افکت ها به CSS منتقل شده اند mask، clip-path، و filter خواص با این حال ، هنوز هم می توان یک انتخابگر SVG را هدف قرار داد:

.myelement {
  clip-path: url(#clip);
}

این یک اثر را در SVG تعبیه شده در HTML ارجاع می دهد:

<svg xmlns="https://www.w3.org/2000/svg" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;">
  <defs>
    <clipPath id="clip">
      <text x="0" y="200" font-family="Arial" font-size="10em" font-weight="800">Text Clip</text>
    </clipPath>
  </defs>
</svg>

این جلوه هایی مانند متن کوتاه با تصویر یا پس زمینه شیب دار را تولید می کند:

قلم را ببینید
برش SVG توسط SitePoint (SitePoint)
بر CodePen.

SVG های قابل حمل

سرانجام ، یک فایل مستقل SVG می تواند شامل متن ، CSS ، جاوا اسکریپت ، تصاویر bitmap و حتی قلم های رمزگذاری شده با base64 باشد! هر چیزی خارج از حوزه XML باید در آن موجود باشد … ]]> بخشها

<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8">
  
  <style>/* <![CDATA[ */
    path {
      stroke-width: 0;
      fill: #080;
    }

    path:hover {
      fill: #c00;
    }
  /* ]]> */</style>
  <path d="M70.9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70.9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17.8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z"/>
  <path d="M319 35.4v17.8h17.6V35.4H319zm17.6 17.8v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53.2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h-35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z"/>
  <script>/* <![CDATA[ */
    const
      viewX = [35.4, 283.6],
      animationDelay = 500,
      invader = document.getElementById('invader');

    let frame = 0;

    setInterval(() => {
      frame = ++frame % 2;
      invader.viewBox.baseVal.x = viewX[frame];
    }, animationDelay);

  /* ]]> */</script>
</svg>