به معنای واقعی کلمه: مقیاس پذیر گرافیک برداری... ام وی جی؟ SVG! V فرمت های بردارینه خود تصویر ذخیره می شود، بلکه دستورالعمل هایی برای ساخت آن از روی نقاط و منحنی ها ذخیره می شود.
V فرمت های شطرنجیاطلاعات در مورد تعداد مشخصی از نقاط تصویر در یک آجر باینری بسته بندی شده است. بررسی آن بی فایده است و فقط در ویرایشگرهای گرافیکی می توانید آن را تغییر دهید.
�PNG IH�aV PLTE���������0� IDacZ�d����� �W = S�3�o؛ ���] P ���IEND�B`� ~
فرمت SVG همچنین می تواند در ویرایشگرهای گرافیکی مانند Illustrator، Sketch یا Inkscape ایجاد و اصلاح شود. اما متن نیز هست، به این معنی که می توان آن را به صورت HTML یا CSS در هر ویرایشگر کد باز کرد.
بیشتر به شما می گویم: SVG مانند یک صفحه HTML جداگانه است. وقتی SVG را جاسازی می کنید، در واقع نه فقط یک عکس، بلکه کل صفحه را جاسازی می کنید. با سیستم مختصات، نمای، استایل ها، اسکریپت ها و ویژگی های شگفت انگیز.
سبک ها و فیلمنامه ها، کارل! در اینجا یک عکس ساده برای شما است.
نگاه به SVG به عنوان صفحه جداگانه- مشخص می شود که به کدام روش درج نیاز دارید. چهار مورد اصلی وجود دارد و هر کدام ویژگی های خاص خود را دارند.
اولین و ساده ترین عنصر عنصر است درست در کد HTML این، در اصل، بیشترین است روش موثرهر تصویری را بارگیری کنید - مرورگرها از قبل با کد HTML می دانند که در آنجا وجود دارد و شروع به بارگیری آن می کنند.
نکته منفی این است که اسکریپت ها در چنین SVG کار نمی کنند و هر گونه تلاش برای تعامل با عناصر داخل محکوم به فناست. فایل مانند شیشه خواهد بود: می توانید نگاه کنید، اما نمی توانید آن را لمس کنید. همه چیزهای دیگر در داخل به خوبی کار می کنند، از جمله انیمیشن های CSS.
این روش برای تصاویر محتوایی که نیازی به تعامل ندارند مناسب است: آرم ها، گرافیک ها، نمودارها.
راه دوم این است تصویر پس زمینهدر CSS و مهم نیست که آن را روی یک عنصر، شبه عنصر یا محتوای درج کنید - نتیجه همان خواهد بود که با : پشت شیشه، اما چیزی داخل آن کار می کند.
.picture (تصویر پس زمینه: url (picture.svg)؛)
این روش برای گرافیک های طراحی که نیازی به تعامل ندارند، مناسب است: پس زمینه، آیکون ها و سایر موارد کوچک.
راه سوم، از طریق
در واقع، به جای