Cant link svg file in my html

1

I have a svg file, a simple logo. When i place it within the html, as raw code, it works. If i try to link it from its own svg file, the image does not display. I use the following syntax:

<img src="fileName.svg" width=300px height=160px alt="cant load svg">

I get the alt value. The src link is correct. I explicitely added height and width to make sure its not the case when image is loading with zero size.
I know where the problem is, but i cant find a solution to fix it…My browser tells me the file is loaded as type “text/html”, when it has to be “image/html”. I came to the information i need to change the headers of the file, to the correct type, but i dont know how to do that. I only find solution for wordpress and one was express server iirc. Im building my app via the react create app, which includes node, but im not sure thats of much essence as even when i tried to load vanilla JS site with no additional modules included, i cannot render svg file in html, with the same issue
How to change to goddamn header of svg file so it has the correct format(i also tried <object> syntax with the right format type and have even worst results…)

this is the starting line of the svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

its followed by svg element

2

Your SVG file is missing the xmlns attributes. That’s fine if you’re using it inline (ie as an HTML element), but you’re not, and the browser had no idea what it is, so it just assumes default. It should look like

<svg xmlns="http://www.w3.org/2000/svg">

Version doesn’t matter afaik, but xmlns is required. I don’t know what that other attribute is

3

Just to be sure.

  1. Is the SVG in the public folder?

  2. Have you tried importing it into the component instead, that is how I would suggest you do it. You can look at the example starter code in a fresh CRA.

import logo from './logo.svg';

<img src={logo} className="App-logo" alt="logo" />
4 
<img src="fileName.svg" width=300px height=160px alt="cant load svg">

try to use quotes for attribute for good practice

5

No, html attributes don’t need to be quoted

6

thanks, i develop lots of projects but honestly i was not aware of that html attributes don’t need to be quoted.

i always give them

7

@DanCouper , @rio_sanap , @lasjorg
thanks for your replies and sorry for the lack of additional description in my initial post.

My svg file does include a svg element which has the proper xmln attribute, at least i think so, as my knowledge of svg is limited and i use what i got by default. Here is a snippet of the attributes it has:

<svg
   width="214.15149mm"
   height="78.713112mm"
   viewBox="0 0 214.15149 78.713112"
   version="1.1"
   id="svg21818"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
...

The file is created by Inkscape. if it matters.
The svg file is not in the public folder, but in another subfolder, but i use the proper src path.
I was looking for ways to import it as react component, but wanted to first try as regular object/image.

Do i need to define an export within the svg file, in order for this to work? Is “logo” just a custom name?

Im able to use the svg file as background image via css, so it cant be a problem within the file, at least i guess so

8

You just import the file and use it, or you can import it as a component.

It will also work when loaded from the public folder.

You can not just have the file next to the component and link to it as you would in plain HTML.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.