CSS مع SVG: الاستخدام الفعلي في العالم

SVG هو تنسيق صورة متجه خفيف الوزن يُستخدم لعرض مجموعة متنوعة من الرسومات على الويب والبيئات الأخرى مع دعم التفاعل والرسوم المتحركة. في هذه المقالة ، سوف نستكشف الطرق المختلفة لاستخدام CSS مع SVG ، وطرق تضمين SVGs في صفحة ويب ومعالجتها.

كان تنسيق Scalable Vector Graphic (SVG) معيارًا مفتوحًا منذ عام 1999 ، ولكن استخدام المتصفح أصبح عمليًا في عام 2011 بعد إصدار Internet Explorer 9. واليوم ، يتم دعم SVG جيدًا في جميع المتصفحات، على الرغم من إمكانية اختلاف الميزات الأكثر تقدمًا.

فوائد SVG

تحدد تنسيقات الصور النقطية مثل WebP و PNG و JPG و GIF لون وحدات البكسل الفردية. أ 100 × 100 تتطلب صورة PNG 10000 بكسل. يتطلب كل بكسل أربعة بايت للأحمر والأخضر والأزرق والشفافية ، وبالتالي فإن الملف الناتج هو 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 لديه دائرة صفراء ذات حد أحمر و a 250 نصف قطر الوحدة المرسوم في المركز:

دائرة SVG

هذه هي فوائد المتجهات على الصور النقطية:

  • يستخدم SVG أعلاه أقل من 150 بايت ، وهو أصغر بكثير من تنسيق PNG أو JPG المكافئ
  • تكون خلفيات SVG شفافة بشكل افتراضي
  • يمكن تغيير حجم الصورة إلى أي حجم دون فقدان الجودة
  • يمكن إنشاء كود / عناصر SVG ومعالجتها على الخادم (باستخدام أي لغة) أو المستعرض (باستخدام CSS و JavaScript)
  • من حيث إمكانية الوصول وتحسين محركات البحث ، فإن عناصر النص والرسم قابلة للقراءة آليًا وبشرًا.

تعتبر صور SVG مثالية للشعارات والمخططات والأيقونات والرسوم البيانية البسيطة. الصور فقط غير عملية بشكل عام ، على الرغم من استخدام SVGs العناصر النائبة كسول التحميل.

من المفيد فهم أساسيات ملفات رسم SVG، ولكنك سترغب قريبًا في إنشاء أشكال أكثر تعقيدًا باستخدام محرر يمكنه إنشاء التعليمات البرمجية. تشمل الخيارات:

كل أداة لها نقاط قوة مختلفة ، وستحصل على نتائج مختلفة للصور التي تبدو متطابقة. بشكل عام ، تتطلب الصور الأكثر تعقيدًا برامج أكثر تعقيدًا.

يمكن عادةً تبسيط الكود الناتج وتقليله باستخدام SVGO (الإضافات متاحة لمعظم أدوات البناء) ، أو جيك أرشيبولد أداة تفاعلية SVGOMG.

SVGs كصور ثابتة

عند استخدامها داخل HTML <img> علامة أو CSS background-url، تعمل SVGs بشكل مماثل للصور النقطية:


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

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

سيقوم المستعرض بتعطيل أي برامج نصية وروابط وميزات تفاعلية أخرى مضمنة في ملف SVG. يمكنك معالجة ذلك SVG باستخدام CSS بطريقة مماثلة للصور الأخرى باستخدام transform، filters، إلخ. غالبًا ما تكون النتائج أفضل من الصور النقطية نظرًا لإمكانية تحجيم صور 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

يمكن وضع SVGs مباشرة في ترميز 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.

انظر القلم
ملف SVG مضمّن في HTML
بواسطة SitePoint (تضمين التغريدة)
على كود.

يمكن استهداف عناصر SVG مثل المسارات والدوائر والمستطيلات وما إلى ذلك بواسطة محددات CSS وتعديل النمط باستخدام سمات SVG القياسية كخصائص CSS. فمثلا:


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

هذا يتجاوز أي سمات معرفة في SVG لأن CSS لها خصوصية أعلى. يوفر تصميم SVG CSS عدة مزايا:

  • يمكن إزالة التصميم المستند إلى السمات من SVG تمامًا لتقليل وزن الصفحة
  • يمكن إعادة استخدام نمط CSS عبر أي عدد من SVGs على أي عدد من الصفحات
  • يمكن أن يكون لعناصر 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. فشل في IE.
  2. ينطبق نمط CSS فقط على <svg> عنصر يحتوي على <use>. ال fill هنا يجعل كل عنصر من عناصر الرمز بنفس اللون.

لحل هذه المشكلات ، يمكن تضمين كائن SVG في صفحة HTML ثم إخفاؤه باستخدام display: none أو تقنيات مشابهة. يمكن وضع رمز فردي من خلال الرجوع إلى المعرّف:

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

انظر القلم
صور متحركة SVG
بواسطة SitePoint (تضمين التغريدة)
على كود.

يعمل هذا في جميع المتصفحات الحديثة بما في ذلك IE9 + ويصبح من الممكن تصميم عناصر فردية داخل كل رمز باستخدام CSS.

لسوء الحظ ، لم تعد مجموعة SVG مخزنة مؤقتًا ويجب إعادة إنتاجها في كل صفحة حيث يلزم وجود رمز. الحل (لهذا الحل!) هو تحميل ملف SVG باستخدام Ajax – والتي يتم تخزينها مؤقتًا بعد ذلك – وحقنها في الصفحة. ال IcoMoon يوفر التنزيل مكتبة JavaScript ، أو يمكنك استخدام ملفات 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 (تضمين التغريدة)
على كود.

SVGs المحمولة

أخيرًا ، يمكن أن يحتوي ملف SVG المستقل على نصوص و CSS وجافا سكريبت وصور نقطية وحتى خطوط بتشفير base64! يجب تضمين أي شيء خارج نطاقات XML ]]> أقسام.

ضع في اعتبارك ما يلي invader.svg ملف. يحدد نمط CSS مع تأثيرات التمرير ورسومات JavaScript المتحركة التي تغير تنسيق viewBox بين دولتين:

<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>

عندما يشار إليها في HTML <img> أو خلفية CSS ، يصبح SVG صورة ثابتة للحالة الأولية (في الأساس ، إطار الرسوم المتحركة الأول):

الغزاة

ومع ذلك، افتح الصورة في علامة تبويب المتصفح الخاصة بها وستعود جميع التأثيرات.

قد يكون هذا مفيدًا لتوزيع الصور أو العروض التوضيحية أو المستندات الصغيرة التي تتطلب بعض التفاعل المضمّن.

صور SVG متطورة

تقدم SVGs مجموعة واسعة من الإمكانيات التقنية - داخل وخارج صفحات الويب. يصبح من الممكن تصميم وتحريك صورة SVG بأكملها أو عناصر رسم فردية باستخدام CSS و / أو JavaScript.

توضح هذه المقالة طرقًا لمعالجة صور SVG ، لكنها تُستخدم بانتظام لتحسينات مرئية أصغر ، مثل:

  • التركيز على النموذج والتحقق من صحته
  • تحويل قائمة الهامبرغر إلى ملف X رمز الإغلاق
  • مصباح الحمم مثل يتحول.

على الرغم من عصر تقنية SVG ، لا يزال مطورو الويب يكتشفون طرقًا مثيرة للاهتمام لتحويل الصفحات القائمة على الكتل المملة بتأثيرات دقيقة من خلال استخدام صور CSS و SVG. دعني اعرف على تويتر إذا قمت بإنشاء أي مظاهرات جيدة.

المصدر

أضف تعليق