The SVG doesn't load properly, is there anything I'm doing wrong. Or I should just upload a png instead?
<svg width=513.57px height=760.29px xmlns="Component 1.svg" alt="White bellflowers"></svg>
CodePudding user response：
If you want to use the svg with an svg tag and modify/style it like you could typical HTML/CSS, you have to include the entirety of the SVG markup inline. The XMLNS attribute is only for defining the "namespace" of the XML, which for svgs, is basically always
<svg xmlns="http://www.w3.org/2000/svg">
This just tells the browser/xml parser that its dealing with an svg element, and the contents inside should be treated accordingly.
If you want to use an svg graphic in an external file like a regular image, you can just use a standard 'img' tag like the other commenter suggested. But be aware that this generally prevents you from being able to style and target different parts of the SVG with CSS like you could with regular markup.
Lastly, instead of explicitly setting height and width with pixel dimensions, its better to define a "viewBox" attribute for an svg that gives it its correct proportions/aspect ratio, and then let the browser scale and size it as needed depending on what container its placed in. For your svg this would look like
<svg viewBox="0 0 514 760" xmlns="http://www.w3.org/2000/svg" ...
That way it can be whatever size it needs to be and flow with the rest of the page content.
CodePudding user response：
It looks like you've mixed up <imgs and <svgs.
Images have srces and SVGs need to include their paths etc.