Highlighted

why svg swap from png not displaying

Enthusiast ,
Dec 03, 2017

Copy link to clipboard

Copied

Hi,

Logo was a .png. Decided to convert to SVG, ensuring artboard dimensions matched original PNG.

Swapped with a find & replace. Tested in live view locally, and nothing displays.

Any idea?

<h1 class="navbar-brand navbar-brand_"><a href="index.html"><img src="img/logo.svg" alt="logo"></a></h1>

Needed to include the dimensions in the src call. Then, it appeared.

Views

324

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

why svg swap from png not displaying

Enthusiast ,
Dec 03, 2017

Copy link to clipboard

Copied

Hi,

Logo was a .png. Decided to convert to SVG, ensuring artboard dimensions matched original PNG.

Swapped with a find & replace. Tested in live view locally, and nothing displays.

Any idea?

<h1 class="navbar-brand navbar-brand_"><a href="index.html"><img src="img/logo.svg" alt="logo"></a></h1>

Needed to include the dimensions in the src call. Then, it appeared.

Views

325

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 03, 2017 0
LEGEND ,
Dec 03, 2017

Copy link to clipboard

Copied

First thing to check is your file path, then if that does not work create a new html page just with the image link to the svg on the page.

Also have you made certain the svg format is correct, (open the svg directly in Dw). If nothing is displayed your svg headers, (xml type declaration etc) are probably incorrect or missing. If you created the svg in illustrator did you remember to 'export as svg', as simply saving as svg will not work.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2017 1
Adobe Community Professional ,
Dec 03, 2017

Copy link to clipboard

Copied

Rather than us guessing at what is going on, it is much better to upload the project to a (temporary) online location. When you then give us the link to that location, we will be able to see first hand at what is going on.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2017 0
Enthusiast ,
Dec 05, 2017

Copy link to clipboard

Copied

Needed to include the dimensions in the src call. Then, it appeared.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2017 0
pziecina LATEST
LEGEND ,
Dec 05, 2017

Copy link to clipboard

Copied

Just as an update to others with the same problem, there is no need to include the dimensions in the img src call, and it is recommended that when using the html5 doctype you do not do so. Either use css to set the dimensions or allow the containing element to 'set' the svg size for you.

svg is a vector format and will scale to any dimension without loss of quality, providing the svg uses % in its settings.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2017 0