Цель работы
Изучить способы вставки SVG-изображения на web-страницу, принципы создания svg-фигур и svg-контуров; познакомиться с правилами применения трансформации и градиентной заливки к фигурам.
Задания
Задание 1
Создайте на html-страничке svg-изображение с использованием различных примитивов, заливок (fill) и обводок (stroke), нарисуйте фигуры с наложением и примените прозрачность (fill-opacity).
Решение
SVG 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse rx="110" ry="30" cx="111" cy="31" fill="coral" stroke="red" 
        fill-opacity=".2" stroke-opacity=".2" stroke-width="3"/>
    <rect width="130" height="80" x="110" y="12" fill="coral" stroke="red" 
        fill-opacity=".2" stroke-opacity=".2" stroke-width="3"/>
</svg>
Задание 2
Примените трансформацию к отдельным примитивам.
Решение
SVG 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse rx="110" ry="30" cx="111" cy="31" transform="rotate(-30 212 32)" fill="coral" 
        stroke="red" fill-opacity=".2" stroke-opacity=".2" stroke-width="3"/>
    <rect width="130" height="80" x="110" y="12" transform="skewX(40)" fill="coral" 
        stroke="red" fill-opacity=".2" stroke-opacity=".2" stroke-width="3"/>
</svg>
Задание 3
Примените градиентную заливку к отдельным фигурам.
Решение
SVG 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="30%" stop-color="coral"/>
            <stop offset="70%" stop-color="orange"/>
        </linearGradient>
    </defs>

    <ellipse rx="110" ry="30" cx="112" cy="32" transform="rotate(-30 212 32)" fill="url(#MyGradient)" 
        stroke="red" fill-opacity=".6" stroke-opacity=".2" stroke-width="3"/>
    <rect width="130" height="80" x="110" y="12" transform="skewX(40)" fill="url(#MyGradient)" 
        stroke="red" fill-opacity=".4" stroke-opacity=".2" stroke-width="3"/>
</svg>
Задание 4
Создайте новый html файл с svg-изображением. Скопируйте svg-код любой иконки (см. выше) в раздел defs. Разместите этот контур не менее 5-ти раз на страничке при помощи тега use (в теге use указывается id контура, прописываются его координаты и при необходимости трансформация). Задайте различные CSS-стили и примените их к контурам.
Решение
SVG 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
        .fill-1{
            fill: coral
        }

        .fill-2{
            fill: lightblue
        }

        .fill-3{
            fill: wheat
        }
    </style>

    <defs>
        <path id="bubble" d="M50 6.25c27.614 0 50 18.188 50 40.625 0 22.437-22.386 
        40.625-50 40.625-2.652 0-5.255-0.169-7.795-0.493-10.74 10.74-23.56 12.666-35.955 
        12.949v-2.629c6.693-3.279 12.5-9.252 12.5-16.078 0-0.953-0.074-1.888-0.211-2.802-
        11.308-7.448-18.539-18.824-18.539-31.573 0-22.437 22.386-40.625 50-40.625z"/>
    </defs>

    <use href="#bubble" class="fill-1" x="0" y="10"/>
    <use href="#bubble" class="fill-2" x="120" y="10"/>
    <use href="#bubble" class="fill-3" x="240" y="10"/>
</svg>
Задание 5
Примените трансформацию и измените размер отдельных экземпляров иконок.
Решение
SVG 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
        .fill-1{
            fill: coral
        }

        .fill-2{
            fill: lightblue
        }

        .fill-3{
            fill: wheat
        }
    </style>

    <defs>
        <path id="bubble" d="M50 6.25c27.614 0 50 18.188 50 40.625 0 22.437-22.386 
        40.625-50 40.625-2.652 0-5.255-0.169-7.795-0.493-10.74 10.74-23.56 12.666-35.955 
        12.949v-2.629c6.693-3.279 12.5-9.252 12.5-16.078 0-0.953-0.074-1.888-0.211-2.802-
        11.308-7.448-18.539-18.824-18.539-31.573 0-22.437 22.386-40.625 50-40.625z"/>
    </defs>

    <use href="#bubble" class="fill-1" x="0" y="30" transform="scale(1.1 .8)"/>
    <use href="#bubble" class="fill-2" x="90" y="10" transform="scale(1.5 .8)"/>
    <use href="#bubble" class="fill-3" x="160" y="10" transform="scale(2 .5)"/>
</svg>