Как сделать SVG по центру?

Question

[Аркадий Баганин]

Доброго времени суток!
Мне нужно сделать прелоадер, но я никак не могу поместить svg по центру экрана и сделать его адаптивным!
Скачать SVG
Вот HTML:

<div class="preloader" text-align="center">
       <img src="./BLACK_HOME.svg" alt="svg" class="loader">
</div>

Вот CSS:

.preloader{
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 50%;
                left: 50%;
                text-align: center;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                z-index: 999;
                background-color: #0D0D0D;
            }
            .loader{
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                z-index: 9999;
            }

Как сделать по центру экрана, как пофиксить и что желательно почитать/посмотреть?

Comments

[Александр]

Для начала следует правильно обрезать картинку, посмотрите на её размеры.

[Аркадий Баганин]

Александр, а как это сделать?

[Сергей delphinpro]

Аркадий Баганин, в графическом редакторе обычно картинки редактируют =))
В данном случае векторном. Иллюстратор, InkSpace и другие.

Answer 1

[Rustam Bainazarov]

1. Во-первых, у вас SVG неправильный: сама картинка среди кучи пустого пространства.
2. Во-вторых, много лишнего CSS-кода.
3. В-третьих, лучше сделать через background-image, чтобы избежать ошибок масштабирования в IE.
4. В-четвертых я исправил и сжал ваш SVG:



Просто скопируйте SVG-код.