Как сделать, что бы svg-изображение внутри контейнера svg всегда было по центру?

Question

[CityzenUNDEAD]

Всем здаров!
У меня есть тег svg, внутри которого код картинки, мне нужно что бы контейнер svg, и изображение были размером 75x22, но при таких размерах картинка отображается где-то в нижней правой части svg-контейнера. Я знаю, что есть атрибут viewBox, но я чет не понял как он работает.
Кто-нибудь подскажите, как можно сделать, что бы svg изображение всегда было по центру svg контейнера?
Меня в частности интересует, почему если у svg тега из моего примера сбросить размеры и вьюбокс, изображение находится по центру, хотя должно находится в левом верхнем углу?
https://codepen.io/_web_spider_/pen/zYYabjb

Answer 1

[Рома Зварич]

У меня есть тег svg

И для тега <svg> задан размер 75x22

внутри которого код картинки

Код не совсем картинки. С помощью svg-путей (кривых линий) написан текст "pink"

мне нужно что бы контейнер svg, и изображение были размером 75x22

Проблема в том, что текст нарисован с помощью абсолютно указанных координат. И начинается это рисование с отступом в ~70px по оси X и ~18px по оси Y. Естественно, при холсте всего в 72x22px кривые будут выходить за рамки холста.

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

Я так понимаю, под "сбросить" подразумевается "не указывать вообще"?
Потому что по умолчанию, svg-элемент имеет размеры 300x150px и при таких размерах нарисованные с помощью абсолютно заданных координат кривые видны.

UPDATE:

как можно сделать, что бы svg изображение всегда было по центру svg контейнера?

Не проще ли сделать нужный контейнер через HTML, а внутри него уже позиционировать SVG-элемент с фиксированными размерами?
Также, я изменил принцип рисования этого слова, чтобы оно не отступало 75px слева
Пример:
https://codepen.io/hisbvdis/pen/jOOKRNv

Comments

[CityzenUNDEAD]

Спасибо большое! А как ты изменил принцип рисования слова? Я прошел 3 онлайн курса по svg в htmlAcademy, но что-то не видел там такого.
Можешь скинуть ссылку какую-нибудь, где можно про это подробно почитать.

[Рома Зварич]

CityzenUNDEAD, вручную это наверное нереально сделать. Через графический векторный редактор сделал. Наверное, любой подойдёт для этого. Типа Adobe Illustrator или Inkscape

Answer 2

[Сергей delphinpro]

1. Откройте в Иллюстраторе.
   
2. Перейдите на вкладу монтажных областей.
   
3. Задайте размеры, например, 128х128 пикселей (это будет viewBox)
   
4. Задайте смещение по горизонтали на половину ширины (64пикс), по вертикали наполовину высоты отрицательно (-64пикс)
   
5. Перейдите на вкладку со слоями
   
6. Выделите всю иллюстрацию.
   
7. В верхней панели задайте положение по X = 64 (половина ширины), по Y = 64 (половина высоты)
   
8. Там же включите сохранение пропорций и выставьте размеры. Если картинка квадратная, то одинаковые значения ширины и высоты по размеру монтажной области (128пикс). Если картинка прямоугольная, то задаем размер равный монтажной области только по большей стороне, меньшая скорректируется благодаря сохранению пропорций.
   
9. Сохраните в формате SVG.
   

Теперь можете задавать для изображения любые размеры в стилях — картинка будет по центру вьюбокса.