Логотип и sprite.svg

[Nik XaOS 0]

Всем привет. Конвертировал картинку png в svg, мне дали код

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="250.000000pt" height="134.000000pt" viewBox="0 0 250.000000 134.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,134.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 670 l0 -670 1250 0 1250 0 0 670 0 670 -1250 0 -1250 0 0 -670z"/>
</g>
</svg>

Как только я не пихал его в sprite.svg чтобы заменить стандартный логотип, не чего не выходит. Подскажите как правильно заменить лого? Если использовать png, то он встает криво, либо низко, либо высоко и вылезает за края.

[TeraMoune 56]

53 минуты назад, Nik XaOS сказал:

Как только я не пихал его в sprite.svg

И как же ? Покажите...😑А как пытались использовать ?

Изменено 20 декабря 2023 пользователем TeraMoune

[Nik XaOS 0]

7 часов назад, TeraMoune сказал:

И как же ? Покажите...😑А как пытались использовать ?

Я заменил path на свое, но это не сработало. Если png вставить. то все криво.

<path d="M0 670 l0 -670 1250 0 1250 0 0 670 0 670 -1250 0 -1250 0 0 -670z"/>

[TeraMoune 56]

1 час назад, Nik XaOS сказал:

Я заменил path на свое, но это не сработало.

Попробую угадать, вместо логотипа чёрная область ?

[Nik XaOS 0]

26 минут назад, TeraMoune сказал:

Попробую угадать, вместо логотипа чёрная область ?

Нет, он вобще не отображается, как будто его нет

[TeraMoune 56]

@Nik XaOSНу так у меня его тоже нет, вместо логотипа чёрная область. Даже редакторы не воспринимают.

[Nik XaOS 0]

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

[master27 38]

29 минут назад, Nik XaOS сказал:

Может знающее люди подскажут как отцентровать хотя бы png

Подсказываю. Вот так...
https://ibb.co/HNhTc0g

[Captain 623]

Просто нужно создать отдельный svg для лого, а не пихать код в sprite.

[TeraMoune 56]

4 часа назад, Captain сказал:

Просто нужно создать отдельный svg для лого, а не пихать код в sprite.

Если svg изображение нормальное то разницы совершенно вот никакой нету, и от того где вы разместите код ничего не изменится. Либо всё работает и показывается либо нет и тогда это проблема самого кода svg.

[Nik XaOS 0]

5 часов назад, master27 сказал:

Подсказываю. Вот так...
https://ibb.co/HNhTc0g

Очень помогли...

5 часов назад, Captain сказал:

Просто нужно создать отдельный svg для лого, а не пихать код в sprite.

Есть такой файл. Но тоже как то криво встает. Я не силен в CSS, может где-то надо что-то подправить именно там, но я в этом не силен. По этому и спрашиваю.

[TeraMoune 56]

10 часов назад, Nik XaOS сказал:

Может знающее люди подскажут как отцентровать хотя бы png лого

Могут помочь такие свойства как transform (translate|translateY|translateX) (Вместе с left и top)

{
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

Это один из способов использующих одновременно несколько свойств связанных с позиционированием объекта.

Другой вариант использовать margin. (Что собственно в оригинальном лого и применяется, оно отталкивается от верхней границы на 20px)

{
  margin: 20px 0 0 0;
}

 

4 часа назад, Nik XaOS сказал:

Очень помогли...

Ваши скриншоты ровно так же ничего не объясняют... Он вас затролил...

 

10 часов назад, Nik XaOS сказал:

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

 

4 часа назад, Nik XaOS сказал:

Я не силен в CSS, может где-то надо что-то подправить именно там, но я в этом не силен.

Инспектируйте исходный код элемента и смотрите его свойства, прямо в браузере играйтесь с параметрами меняя их. Играйтесь с свойствами и читайте о них, экспериментируете с новыми, делать это в браузере или песочнице.

Ищите полезные ресурсы и тратьте время на них, что-то читая и применяя на практике. Ищите различные примеры (есть ресурсы по типу той же песочнице но там люди из всего мира делятся уже готовыми вещами, от стилизаций кнопок и форм до сложных скриптов и canvas анимации, интерактива и прочего) разбирайте чужие вещи на составляющие стараясь всегда понять что-то новое чего вы еще не знали.

Этот ресурс у вас должен быть в закладках: https://htmlbook.ru и вам на данном этапе чуть ли не каждый день его посещать необходимо 😑. Там всё о HTML и CSS ну или очень и очень много.

Изменено 21 декабря 2023 пользователем TeraMoune

[Nik XaOS 0]

1 час назад, TeraMoune сказал:

Могут помочь такие свойства как transform (translate|translateY|translateX) (Вместе с left и top)

{
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

Это один из способов использующих одновременно несколько свойств связанных с позиционированием объекта.

Другой вариант использовать margin. (Что собственно в оригинальном лого и применяется, оно отталкивается от верхней границы на 20px)

{
  margin: 20px 0 0 0;
}

 

Ваши скриншоты ровно так же ничего не объясняют... Он вас затролил...

 

 

Инспектируйте исходный код элемента и смотрите его свойства, прямо в браузере играйтесь с параметрами меняя их. Играйтесь с свойствами и читайте о них, экспериментируете с новыми, делать это в браузере или песочнице.

Ищите полезные ресурсы и тратьте время на них, что-то читая и применяя на практике. Ищите различные примеры (есть ресурсы по типу той же песочнице но там люди из всего мира делятся уже готовыми вещами, от стилизаций кнопок и форм до сложных скриптов и canvas анимации, интерактива и прочего) разбирайте чужие вещи на составляющие стараясь всегда понять что-то новое чего вы еще не знали.

Этот ресурс у вас должен быть в закладках: https://htmlbook.ru и вам на данном этапе чуть ли не каждый день его посещать необходимо 😑. Там всё о HTML и CSS ну или очень и очень много.

Спасибо! помогло это 

style="position: relative; top: 20px;