SVG изображение. Как сделать его path?

#html #css #svg

Не могу нормально разобраться с path (SVG). Может кто помочь сделать такую вот вроде
бы "несложную" штуку? Был бы чрезмерно благодарен, или дайте наводку.
Можно сделать и без плавных кривых, просто срез.
 Опять же, я был бы очень признателен, это только просьба.
Ширина примерно на 50px. ViewBox=" 0 0 50 50"

И как лучше такой штуке задать тень?


    

Ответы

Ответ 1

Ответ будет подробный для начинающих изучать SVG.  

Используя данную технику, легко получить любую простую или сложную фигуру SVG, которая
будет адаптивна и будет одинаково выглядеть во всех браузерах.

Техника получения path по заданной картинке


Пишем код svg для добавления вашей картинки в векторный редактор.
Картинка имеет размеры 380x50 px




	 





В векторном редакторе с помощью инструмента -"Добавлять кривые
Безье" (на рисунке цифра 1) - наносим по границам рисунка узловые
точки  

При необходимости корректируем положение узловых точек (инструмент 2)
перетаскиванием и форму кривых изменяем рычагами узловых точек.   


  


Сохраняем файл в векторном редакторе в формате SVG. Из этого файла
нам нужна только формула патча. Копируем её в рабочий файл.
Дорабатываем стили - убираем обводку и добавляем цвет 

style="fill:#F44D3D;stroke:none"   


Фигура SVG готова: 






   

Делаем фигуру SVG полностью адаптивной

Для этого заменяем для ширины и высоты пользовательского окна просмотра пиксели на
проценты. Для того, чтобы фигура знимала весь экран браузера присваивается width="100%"
height="100%"
 Для размеров, как у автора вопроса width="25%" height="25%"     






Ответ 2

Добавление тени CSS



.container {
filter:drop-shadow(2px 4px 3px black);
}


  


 

Добавление тени SVG

Код немного сложнее варианта CSS, но выглядит тень SVG более реалистично и имеет
несколько возможностей для регулировки внешнего вида. 


Делаем копию патча основной фигуры и сдвигаем копию влево и вниз на
несколько пикселей:





Применяем к копии патча, которая расположена ниже основного патча
фигуры фильтр размытия Гаусса:       




#pathCopy {
filter:url(#shadow);
}







SVG filter feDropShadow



#path1 {
filter:url(#shadow); 
fill:#F44D3D;
stroke:none;
}







Update      

Сниппет искажает (подрезает снизу) тень. В браузерах этого не наблюдается 

Для регулировки внешнего вида тени по своему вкусу используйте атрибуты фильтра -
dx="2" dy="2" stdDeviation="3"