نحوه قرار دادن گرافیک SVG در صفحه وب شما

SVG یا Scalable Vector Graphics به شما اجازه می دهد تصاویر پیچیده تر پیچیده تر و آنها را در صفحات وب رندر کنید. اما شما نمی توانید به سادگی برچسب های SVG را بردارید و آنها را به HTML خود بکشید. آنها نشان داده نمی شوند و صفحه شما نامعتبر خواهد بود. در عوض، شما باید از یکی از سه روش استفاده کنید.

از برچسب Object برای قراردادن SVG استفاده کنید

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

برای سازگاری با متقابل مرورگر باید ویژگی نوع را که باید خوانده شود را شامل شود:

type = "image / svg + xml"

و کدبازی برای مرورگرهایی که از آن پشتیبانی نمی کنند (اینترنت اکسپلورر 8 و پایین تر). کدبازی شما به پلاگین SVG برای مرورگرهایی که از SVG پشتیبانی نمی کنند اشاره می کند. پلاگین رایج ترین استفاده از Adobe در http://www.adobe.com/svg/viewer/install/ است. با این حال، این افزونه توسط Adobe پشتیبانی نمی شود. یکی دیگر از گزینه های Ssrc SVG Plugin از تحقیقات نرم افزار Savarese در http://www.savarese.com/software/svgplugin/ است.

هدف شما اینگونه خواهد بود:

نکاتی برای استفاده از شی برای SVG

  • اطمینان حاصل کنید که عرض و ارتفاع حداقل به اندازه تصویری که شما در حال جاسازی می کنید، به اندازه بزرگ است. در غیر این صورت، تصویر شما ممکن است قطع شود
  • SVG شما ممکن است به درستی نمایش داده نمی شود اگر شما نوع محتوای صحیح را وارد نکنید (type = "image / svg + xml")، بنابراین توصیه نمی کنم آن را حذف کنید.
  • شما می توانید اطلاعات پشت سر هم در داخل برچسب تگ برای مرورگرهایی که فایل های SVG را نمایش نمی دهند را شامل کند.
  • شما همچنین می توانید منبع SVG خود و نوع محتوا را در پارامترها تنظیم کنید. این ممکن است در IE 6 و 7 بهتر عمل کند:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

توجه داشته باشید که این کار نیاز به یک classid دارد.

یک SVG را در مثال برچسب object نمایش دهید.

قراردادن SVG با برچسب قرارداد

گزینه دیگری برای اضافه کردن SVG به استفاده از برچسب است. شما از ویژگی های تقریبا یکسان به عنوان تگ object استفاده می کنید، از جمله width <، height، type، and codebase>. تنها تفاوت این است که به جای داده ها، URL سند SVG شما را در ویژگی src جای می دهد.

جاسازی شما به نظر می رسد:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

نکاتی برای استفاده از قراردادن برای SVG

  • برچسب جاسازی HTML4 معتبر نیست، اما HTML5 معتبر است، بنابراین اگر شما آن را در یک صفحه HTML4 استفاده کنید، باید به یاد داشته باشید که صفحه شما تأیید نخواهد شد.
  • برای بهترین سازگاری از نام دامنه به طور کامل احیاء شده در اسکریپت src استفاده کنید.
  • همچنین گزارش هایی وجود دارد که با استفاده از تگ جاسازی شده با افزونه Adobe نسخه های موزیلا 1.0 تا 1.4 را خراب می کند.

یک SVG را در مثال برچسب جاسازی مشاهده کنید.

برای افزودن SVG از iframe استفاده کنید

فریم ها یکی دیگر از روش های آسان برای اضافه کردن یک تصویر SVG در صفحات وب شما هستند. این فقط سه ویژگی دارد: عرض و ارتفاع به طور معمول، و src به محل فایل SVG شما اشاره دارد.

iframe شما اینگونه نگاه می کند: