Поширені задачі та замітки з HTML верстки

Привіт:)

Зміст

Особливості вставки в HTML-верстку зображень у SVG форматі
Усі типи HTML тегу <input>

Особливості вставки в HTML-верстку зображень у SVG форматі

SVG (масштабована векторна графіка) — це мова розмітки на основі формату XML для опису двовимірної векторної графіки.

Це відкритий текстовий веб-стандарт для опису зображень, які можна чітко відтворити будь-якого розміру. SVG розроблений спеціально для роботи з іншими веб-стандартами, включаючи CSS, DOM, JavaScript. По суті, SVG для графіки є тим же, що HTML для тексту.

Зображення у цьому форматі в процесі верстки HTML-сторінок можна додати 2-ма способами:

у вигляді посилання на окремий файл у форматі SVG;
скопіювавши та вставивши вміст цього SVG-файлу безпосередньо в код HTML або як значення CSS-властивості.

Для першого способу це виглядатиме так:

<img src="logo.svg" alt="Logo Img">

або

.logo {
  width: 50px;
  height: 50px;

  background-image: url("logo.svg");
  background-repeat: no-repeat;
}

У другому випадку є декілька нюансів, на яких зупинюся детальніше.

Для прикладу розглядатиму безкоштовну Google-іконку, збережену в форматі SVG.

Якщо відкрити цей файл у будь-якому текстовому редакторі, то отримаємо код

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z"/></svg>

Цей код можна вставляти безпосередньо у HTML-код сторінки:

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z"/></svg>
</div>

Або як значення CSS-властивості:

/* svg через CSS-властивість background-image */

background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z'/></svg>");

/* svg через CSS-властивість content */

content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z'/></svg>");

Розгляну цей момент детально, бо тут є нюанси. Якщо відкрити у редакторі svg-файл, скопіювати його вміст та вставити його як значення властивостей background-image чи content, то у цьому коді необхідно зробити деякі зміни.

Всередині конструкції url("...") не повинно бути подвійних лапок. Усі їх замініть на одинарні.
Вміст конструкції url("...") починайте із data:image/svg+xml;charset=UTF-8,.
У вмісті обов'язково вказуйте image/svg+xml та xmlns='http://www.w3.org/2000/svg'.
Властивості висоти height='24' та ширини width='24' прописуйте без одиниць виміру.
У властивості fill не повинно бути символу решітки (#) для встановлення кольору. Її замініть кодом %23 або вкажіть колір словами, наприклад, black, red, purple.