Как обрезать фигуру SVG?

Question

[Ruslan]

Добрый день. Впервые сталкиваюсь с SVG фигурами. Нужно сделать вот такую фигуру, в которой будет человек

Как должно быть

Но когда в ФШ выбирать копировать SVG вставляется полностью фигура, когда я перемещаю ее вправо, ширина сайта просто увеличивается. Вопрос в том, как ее обрезать снизу и справа? И так-же вопрос не будет ли проблем потом вставить туда человека и вообще правильно ли я делаю?)

Как получается

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/MWaXadg - так ?
https://codepen.io/topicstarter/pen/MWaeGjV - вот это я тоже делал для toster

Comments

[Ruslan]

2 вариант - это то, что мне нужно, но не пойму как вы это сделали) Если возможно, хотел бы услышать решение проблемы с эллипсом. А насчет для кого вы это делали, я таких не знаю) Я выполняю дз по скиллбоксу

[Максим]

Ruslan, что такое viewBox знаете ?

[Ruslan]

Максим Ленский, нет, но кажется нашел решение. Щас копаюсь в вашем коде, понял что с помощью x и y совместно с width и height вы его укоротили(эллипс), верно?)

[Максим]

Ruslan, viewBox это зона видимости SVG -всё что за пределами viewBox обрежется как будто установлен overflow: hidden - понял ?
Так вот устанавливая картинку размером 500 x1000 при viewBox 500x500 картинка обрежется - понимаешь ?

[Ruslan]

Максим Ленский, Да, все понял, спасибо. Просто поигрался с width и height в своем документе и все получилось) Еще вопрос, а есть ли возможность укоротить svg код? Просто вот сколько места он занимает у меня и это только фигура

spoiler

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="920px" height="764px">
<defs>
<linearGradient id="PSgrad_0" x1="0%" x2="22.495%" y1="97.437%" y2="0%">
  <stop offset="0%" stop-color="rgb(255,143,90)" stop-opacity="1" />
  <stop offset="99%" stop-color="rgb(255,47,150)" stop-opacity="1" />
</linearGradient>

</defs>
<path fill-rule="evenodd"  fill="rgb(96, 85, 196)"
 d="M395.520,40.407 C502.261,-10.049 602.994,-10.204 687.212,27.671 C771.647,65.238 839.568,140.836 885.703,234.785 C929.973,329.669 929.926,431.584 893.771,514.027 C857.115,597.700 796.105,660.782 712.966,705.804 C668.936,728.473 622.654,744.002 563.818,753.535 C505.757,762.929 435.142,766.325 360.325,761.479 C211.851,752.158 45.449,708.398 10.358,609.690 C-9.529,560.677 2.954,504.492 27.679,447.950 C52.809,391.326 90.181,334.346 129.419,281.835 C169.063,229.242 210.573,181.118 253.309,140.306 C296.450,99.410 340.817,65.827 395.520,40.407 L395.520,40.407 Z"/>
<path fill="url(#PSgrad_0)"
 d="M395.520,40.407 C502.261,-10.049 602.994,-10.204 687.212,27.671 C771.647,65.238 839.568,140.836 885.703,234.785 C929.973,329.669 929.926,431.584 893.771,514.027 C857.115,597.700 796.105,660.782 712.966,705.804 C668.936,728.473 622.654,744.002 563.818,753.535 C505.757,762.929 435.142,766.325 360.325,761.479 C211.851,752.158 45.449,708.398 10.358,609.690 C-9.529,560.677 2.954,504.492 27.679,447.950 C52.809,391.326 90.181,334.346 129.419,281.835 C169.063,229.242 210.573,181.118 253.309,140.306 C296.450,99.410 340.817,65.827 395.520,40.407 L395.520,40.407 Z"/>
</svg>

[Максим]

Ruslan, fill-rule - убери - если не будет последствий то можно убрать, linearGradient это заливка - не убирать, а вот path - это координаты -

Прогони через эту штукенцию - https://jakearchibald.github.io/svgomg/
осторожно ставь галочки

[Ruslan]

Максим Ленский, Спасибо!)