0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Применение<strong>SVG</strong>для стилизации web-сайтов открывает широкие возможности для веб-разработки. Речь идет о масштабируемой векторной графике (<strong>Scalable Vector Graphics - SVG</strong>), основанной на XML-формате.<strong>SVG</strong>позволяет создавать изображение с помощью определенных тегов и атрибутов: написанный вами код сгенерирует изображение, которое можно будет менять непосредственно в текстовом редакторе.</p>
1
<p>Применение<strong>SVG</strong>для стилизации web-сайтов открывает широкие возможности для веб-разработки. Речь идет о масштабируемой векторной графике (<strong>Scalable Vector Graphics - SVG</strong>), основанной на XML-формате.<strong>SVG</strong>позволяет создавать изображение с помощью определенных тегов и атрибутов: написанный вами код сгенерирует изображение, которое можно будет менять непосредственно в текстовом редакторе.</p>
2
<p>Существуют<strong>два основных метода анимации SVG-элемента</strong>:</p>
2
<p>Существуют<strong>два основных метода анимации SVG-элемента</strong>:</p>
3
<ul><li><a><strong>CSS</strong>-анимация</a>;</li>
3
<ul><li><a><strong>CSS</strong>-анимация</a>;</li>
4
<li>встроенная в SVG<strong>SMIL</strong>-анимация (SVG-анимация, базируемая на SMIL и расширяющая его функционал).</li>
4
<li>встроенная в SVG<strong>SMIL</strong>-анимация (SVG-анимация, базируемая на SMIL и расширяющая его функционал).</li>
5
</ul><p>Условно, эти два вида анимаций можно разделить на "внешнюю" и "внутреннюю". Если говорить об отличиях, то CSS характеризуется улучшенной браузерной поддержкой, а SMIL - повышенным функционалом. Это если говорить в общих чертах. На самом деле, не так уж просто ответить, что лучше применять. Во многом выбор будет зависеть от поставленной перед вами задачи. Тем не менее можно выделить<strong>основные причины выбрать SMIL вместо CSS</strong>:</p>
5
</ul><p>Условно, эти два вида анимаций можно разделить на "внешнюю" и "внутреннюю". Если говорить об отличиях, то CSS характеризуется улучшенной браузерной поддержкой, а SMIL - повышенным функционалом. Это если говорить в общих чертах. На самом деле, не так уж просто ответить, что лучше применять. Во многом выбор будет зависеть от поставленной перед вами задачи. Тем не менее можно выделить<strong>основные причины выбрать SMIL вместо CSS</strong>:</p>
6
<ul><li>если надо сделать то, что не смог сделать CSS (к примеру, анимировать неподдерживаемый атрибут и т. п.);</li>
6
<ul><li>если надо сделать то, что не смог сделать CSS (к примеру, анимировать неподдерживаемый атрибут и т. п.);</li>
7
<li>если требуется более точный контроль над веб-анимацией;</li>
7
<li>если требуется более точный контроль над веб-анимацией;</li>
8
<li>если нужен морфинг контура;</li>
8
<li>если нужен морфинг контура;</li>
9
<li>если надо синхронизировать анимации;</li>
9
<li>если надо синхронизировать анимации;</li>
10
<li>если стоит специфическая задача по созданию интерактивных анимаций.</li>
10
<li>если стоит специфическая задача по созданию интерактивных анимаций.</li>
11
</ul><p>При этом важно понимать, что тот факт, что SMIL надо применять для интерактивных анимаций, совсем не означает, что интерактивную анимацию нельзя сделать посредством CSS. Просто дело в том, что SMIL -- это более функциональный и сложный инструмент. Функциональность -- это плюс, но сложность -- это минус, поэтому использовать SMIL надо только по мере необходимости. То есть можно сказать, что если вам надо создать простую анимацию либо анимацию, где вполне можно обойтись и средствами CSS, то лучше именно так и поступить.</p>
11
</ul><p>При этом важно понимать, что тот факт, что SMIL надо применять для интерактивных анимаций, совсем не означает, что интерактивную анимацию нельзя сделать посредством CSS. Просто дело в том, что SMIL -- это более функциональный и сложный инструмент. Функциональность -- это плюс, но сложность -- это минус, поэтому использовать SMIL надо только по мере необходимости. То есть можно сказать, что если вам надо создать простую анимацию либо анимацию, где вполне можно обойтись и средствами CSS, то лучше именно так и поступить.</p>
12
<p>Кто-то скажет, что SMIL-анимация стара как мир, что она понемногу вымирает, что поддержка веб-браузеров хуже, чем у CSS-анимации и т. д. Это все верно, но существует веская причина, почему SMIL до сих пор привлекателен -<strong>SMIL может то, на что не способен CSS</strong>.</p>
12
<p>Кто-то скажет, что SMIL-анимация стара как мир, что она понемногу вымирает, что поддержка веб-браузеров хуже, чем у CSS-анимации и т. д. Это все верно, но существует веская причина, почему SMIL до сих пор привлекателен -<strong>SMIL может то, на что не способен CSS</strong>.</p>
13
<p><em>По материалам https://habr.com/ru/post/450924/.</em></p>
13
<p><em>По материалам https://habr.com/ru/post/450924/.</em></p>
14
14