Почему svg не отображается?

Question

[historydev]

Добрый день. Скажите пожалуйста почему при подключении файла не отображается svg, ide говорит мол нельзя отобразить картинку, ищите проблему, погуглил, нашёл xmlns и xlink, но не понял что это и зачем толком. Вот это в файле img.svg:

<svg width='100%' height='100%'>
    <path d="M50 50 L100 100 L700 100 L700 50 Z" fill="red" />
</svg>

Это в css:

background: url("./img.svg");

Спасибо.

Answer 1

[Михаил]

сходи на wiki , там все доступно

Comments

[historydev]

То-ли я не догоняю, то-ли это не так работает - как это вижу я:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
     baseProfile="full"
     xmlns = "http://www.w3.org/2000/svg"
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:ev = "http://www.w3.org/2001/xml-events"
     width='100%' height='100%'>
    <path d="M50 50 L100 100 L700 100 L700 50 Z" fill="red" />
</svg>

Пустой квадрат. Спасибо

[Руслан Кириченко]

Владимир, Такое подключение - уже устарело!

Answer 2

[Руслан Кириченко]

Здесь Валак объясняет как подключить SVG
SVG

Comments

[historydev]

А я разобрался, спасибо, это работает для меня:

<svg xmlns = "http://www.w3.org/2000/svg" width='700px' height='100px'>
    <path d="M0 0 L100 100 L700 100 L700 0 Z" fill="red" />
</svg>

[historydev]

А как мне поставить на фон через css? Мне бы хотелось фон блока в svg установить

[historydev]

export default function GetInfoBox({title, text, buttonText}) {

    return (
        <div className='infoBox' style={{background: `url(img.svg)`, backgroundSize: '100% 100%', width: '200px', height: '200px'}}>
            <div className="title">{title}</div>
            <div className="text">{text}
                <button>{buttonText}</button>
            </div>
        </div>
    )

}

[Максим]

Владимир, вот так

.item{
width: 300px;
height: 100px;
background-image: url("data:image/svg+xml,%3Csvg xmlns = 'www.w3.org/2000/svg' width='700px' height='100px'%3E%3Cpath d='M0 0 L100 100 L700 100 L700 0 Z' fill='red' /%3E%3C/svg%3E");
background-size: cover;
}