در این آموزش ، ما در مورد روشهایی که می توانید تصاویر SVG را به صفحه وب خود اضافه کنید بحث می کنیم. برخلاف تصاویر bitmap ، SVG ها علامت گذاری XML هستند که اشکال ، خطوط و پرها را توصیف می کنند تا بتوان از سند به روش های مختلفی استفاده کرد.

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

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

1. SVG XML را مستقیماً در صفحه HTML خود قرار دهید

یک تصویر SVG می تواند به عنوان یک جزیره کد مستقیماً در صفحه HTML شما با استفاده از بیرونی اضافه شود <svg> برچسب ها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Embedded SVG</title>
</head>
<body>

  <h1>Embedded SVG</h1>

  
  <svg width="300px" height="300px"
    xmlns="https://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
  </svg>

</body>
</html>

این روش در همه مرورگرهای مدرن کار می کند. SVG به بخشی از صفحه DOM تبدیل می شود ، بنابراین می توان با CSS یا JavaScript دستکاری کرد تا انیمیشن اضافه کند یا به رویدادهای کلیک واکنش نشان دهد. (توجه داشته باشید که هر JavaScript جاسازی شده در SVG خود مسدود خواهد شد.)

عیب اصلی این است که SVG باید در هر صفحه ای که به آن نیاز دارد تعبیه شود و ممکن است لازم باشد برای آیکون های قابل استفاده مجدد تکرار شود. این به وزن صفحه اضافه می کند و اگرچه ممکن است HTML پنهان شود ، اما کد SVG نمی تواند باشد (به آسانی) در جای دیگر مورد استفاده مجدد قرار گرفت.

یک راه حل برای مسئله تکرار تصویر ایجاد یک بلوک SVG مخفی در هر صفحه (با CSS) است display: none) این می تواند به صورت اختیاری حاوی چندین تصویر باشد که با استفاده از id:

<svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <symbol id="box" viewBox="0 0 32 32">
      <title>box</title>
      <rect width="32" height="32" fill="#00c" />
    </symbol>
    <symbol id="circle" viewBox="0 0 32 32">
      <title>circle</title>
      <circle cx="16" cy="16" r="16" fill="#c00" />
    </symbol>
  <defs>
</svg>

سپس از آیتم های جداگانه می توان هر چند بار با استفاده کرد SVG use عنصر:

<svg width="20" height="20">
  <use xlink:href="#box" />
</svg>

<svg width="30" height="30">
  <use xlink:href="#box" />
</svg>

<svg width="40" height="40">
  <use xlink:href="#circle" />
</svg>

تصویر اصلی هنوز هم می تواند با استفاده از CSS استایل شود ، اگرچه اعمال سبک های اضافی برای آن امکان پذیر نیست <use> خودش

2. از an استفاده کنید <img> برچسب زدن

SVG ها می توانند مانند هر تصویر دیگری به صفحه وب شما اضافه شوند:

<img src="image.svg" alt="my image" />

معمول width، height، alt و دیگر <img> ویژگی های در صورت نیاز به آنها می توان اضافه کرد.

مرورگر مانند هر تصویر دیگری با SVG رفتار می کند. به دلایل امنیتی ، هرگونه اسکریپت ، صفحه سبک خارجی ، پیوندها و سایر تعاملات SVG غیرفعال خواهد شد.

اگر چندین تصویر در یک SVG واحد تعریف شده باشد ، می توانید از یک لنگر هدف استفاده کنید myimage.svg#circle – اما این در مرورگرهای قدیمی کار نمی کند.

3. یک تصویر زمینه CSS اعمال کنید

SVG ها می توانند به عنوان پس زمینه CSS برای هر عنصر مورد استفاده قرار گیرند:

#myelement {
  background-image: url('./image.svg');
}

URI داده های درون خطی با رمزگذاری UTF8 همچنین ممکن است برای SVG های کوچکتر و منظم استفاده شود که بعید به نظر می رسد اغلب تغییر کنند (و کل صفحه سبک را بی اعتبار می کنند):

.myelement {
  background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="100" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>');
}

پسندیدن <img> هنگام استفاده از این روش ، برچسب ها ، اسکریپت ها ، پیوندها و سایر انواع تعامل غیرفعال می شوند.

4. بارگیری در <iframe>

مرورگرها می توانند یک سند SVG را به تنهایی ارائه دهند ، بنابراین می توانید یک تصویر را در یک بارگذاری کنید iframe:

<iframe src="./image.svg">
  Your browser does not support iframes.
</iframe>

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

5. از an استفاده کنید <object> برچسب زدن

HTML <object> برچسب زدن می تواند برای افزودن SVG به صفحه شما استفاده شود:

<object type="image/svg+xml" data="./image.svg">
  <img src="./fallback-bitmap.png" />
</object>

متن یا تصاویر بازگشتی را می توان در داخل استفاده کرد <object> مسدود کردن به روشی مشابه با iframes.

سبک ها و اسکریپت ها در SVG اجرا می شوند. سبک کردن SVG با استفاده از CSS در صفحه HTML امکان پذیر نیست ، اما اسکریپت ها می توانند عناصر جداگانه را دستکاری کنند:


const objTag = document.querySelector('object');


objTag.addEventListener('load', () => {

  
  const svg = objTag.getSVGDocument();

  
  Array.from(svg.getElementsByTagName('path'))
    .forEach(p => p.setAttribute('fill', '#00f'))

});

<object> حدود یک دهه پیش بیشترین استفاده را داشت ، زیرا این تنها روش مطمئن برای استفاده از SVG در نسخه های قدیمی IE بود.

6. از an استفاده کنید <embed> برچسب زدن

من از جمله <embed> برای کامل بودن ، اما لطفا از آن استفاده نکنید! شبیه به <object> از آنجا که محتوای خارجی را در صفحه جاسازی می کند ، اما برای برقراری ارتباط با یک برنامه خارجی مانند پلاگین مرورگر طراحی شده است.

<embed type="image/svg+xml" src="./image.svg">
  not supported
</embed>

از زمان نابودی Flash و Silverlight ، مرورگرهای مدرن از افزونه های مرورگر منسوخ شده و پشتیبانی را حذف کرده اند. هرگز اعتماد نکن <embed>.

از کدام تکنیک SVG باید استفاده کنید؟

اگر از SVG به عنوان تصویر استفاده می کنید و نیازی به تغییر سبک یا افزودن اسکریپت ندارید ، یک <img> برچسب یا پس زمینه CSS احتمالاً بهترین گزینه است. پرونده می تواند در مرورگر ذخیره شود و در سایر صفحات بدون بارگیری مجدد مورد استفاده قرار گیرد.

در مواردی که به تعامل نیاز دارید ، محبوب ترین گزینه این است که SVG را مستقیماً درون HTML قرار دهید. سبک ها و اسکریپت ها می توانند DOM را دستکاری کنند ، پیوندها را می توان به هر شکلی اضافه کرد و فیلترهای پیشرفته SVG را می توان برای سایر عناصر صفحه اعمال کرد.

<object> برچسب از پسندیده شده است. اگر بخواهید SVG ها را جدا و حافظه پنهان نگه دارید ، همچنان یک روش قابل قبول است ، اما به کمی دستکاری JavaScript نیاز دارید.

Iframes ممکن است برای برخی از پروژه ها مناسب باشد ، اما هرگز استفاده نکنید <embed> مگر اینکه از رمزگذاری یک مرورگر باستانی ناراحت باشید.