Один із способів вбудувати зображення SVG у HTML – це напишіть код SVG безпосередньо всередині тегу <svg> у вашому документі HTML. Цей метод дає вам повний контроль над атрибутами та стилями SVG, а також дозволяє отримувати доступ до елементів SVG і змінювати їх за допомогою JavaScript і CSS.
Вбудований SVG Також варто зазначити, що це також збільшує розмір файлу електронної пошти, тому додавання складного зображення може збільшити розмір файлу понад 100 Кб і потенційно призвести до проблем із швидкістю надсилання, можливістю доставки та вирізанням у Gmail.
Різні способи вставлення SVG
- Експортуйте SVG у PNG і просто створіть <img src="зображення. …
- тег img: <img src="зображення…
- За допомогою властивості CSS background-image : #element {background-image: url(image. …
- вбудований тег: <embed src="зображення. …
- тег об'єкта: <object type="image/svg+xml" data="image. …
- тег iframe: <iframe src="зображення.
Проблема із зображеннями у форматі SVG полягає в тому, що вони можуть бути потенційно шкідливими – зловмисники можуть легко використовувати їх для вбудовування шкідливого коду JavaScript. Ось чому Outlook в Інтернеті може застосовувати певні політики безпеки, які блокують вміст SVG, таким чином також блокуючи вставлення відповідного підпису.
приклад
- <! DOCTYPE html>
- <html>
- <body>
- <svg width="100" height="100">
- <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
- </svg>
- </body>
- </html>