Skip to content

Дополняет html-доку svg #5977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kiryshka1922 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Дополняет html-доку svg #5977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a58f1e8
Добавлят еще один способ вывода svg на страницу
Kiryshka1922 Mar 22, 2026
384244c
Добавлят точку в конец предложения
Kiryshka1922 Mar 22, 2026
e57b152
Добавляет себя как контрибьютора
Kiryshka1922 Mar 22, 2026
33264e0
Добавляет себя как контрибьютораX2
Kiryshka1922 Mar 22, 2026
5aa44df
Добавляет пустую строку
ra1nbow1 Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion html/svg/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ authors:
contributors:
- skorobaeus
- parus7
- kiryshka1922
keywords:
- свг
- векторная графика
Expand Down Expand Up @@ -131,7 +132,7 @@ SVG не может быть записано без оборачивающег

### Вставка в HTML

Код SVG можно вставить прямо в HTML-разметку страницы.
Код SVG можно вставить прямо в HTML-разметку страницы. Такой прием называют (SVG inline или inlining SVG).

```html
<div class="dots">
Expand Down Expand Up @@ -173,6 +174,16 @@ SVG не может быть записано без оборачивающег

Неприятная особенность: если одна и та же SVG-картинка используется в нескольких местах на сайте, и в какой-то момент вы захотите в ней что-то изменить, то нужно будет найти все вставки и вносить исправления в код. При вставке SVG при помощи `<img>` или `background-image` достаточно будет внести изменения в svg-файл и правки применяться ко всем картинкам.

### [SVG-спрайты](/html/svg-sprite/)

Чтобы использовать иконку из спрайта на странице, нужно добавить внутрь тега `<svg>` тег [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use) с обязательным атрибутом href. Данный атрибут должен ссылаться на файл спрайта с указанием id символа, содержащего нужное изображение.

@vitya-ne vitya-ne Apr 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Привет, было бы здорово добавить демку для демонстрации этого подхода

@ra1nbow1 ra1nbow1 May 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Предлагаю дописать, что в старых проектах можно встретить xlink:href - и человек рано или поздно с этим столкнётся

@ra1nbow1 ra1nbow1 May 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Канцеляризм. Так звучит чуть менее формально

Suggested change
Чтобы использовать иконку из спрайта на странице, нужно добавить внутрь тега `<svg>` тег [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use) с обязательным атрибутом href. Данный атрибут должен ссылаться на файл спрайта с указанием id символа, содержащего нужное изображение.
Чтобы использовать иконку из спрайта на странице, нужно добавить внутрь тега `<svg>` тег [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use) с обязательным атрибутом href. Атрибут должен ссылаться на файл спрайта с указанием id символа, содержащего нужное изображение.


```html
<svg class="social-icon" viewBox="0 0 24 24" width="24" height="24">
<use href="sprite.svg#social-vk"></use>
</svg>
```

## Атрибуты

- `fill` — отвечает за заливку фигуры. Может использоваться как для всего контейнера `svg`, так и для отдельных частей. Более подробно тут → [fill](/css/fill/).
Expand Down
6 changes: 6 additions & 0 deletions people/kiryshka1922/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
name: 'Кирилл Белоусов'
url: https://github.com/Kiryshka1922
badges:
- first-contribution-small
---
Loading