Svg in my header (navbar) not working

I am using the theme LoveIt and I can not render 2 svg images I have one I meant to use for my logo in the navbar and the other for my home page avatar, Does anyone know how to render svg images ? I tried placing them in my assets folder, then tried the static folder, none worked, here is an error message i get:

render: failed to render pages: render of "home" failed: 
e[1;36m"/Users/michael/Documents/02_dev/03_portfolio/02_michael/themes/LoveIt/layouts
/_default/baseof.html:24:16"e[0m: execute of template failed at <partial "header.html" .>: error calling partial: 
e[1;36m"/Users/michael/Documents/02_dev/03_portfolio/02_michael/themes/LoveIt/layouts
/partials/header.html:8:58"e[0m: execute of template failed at <partial "plugin/img.html">: 
e[1;36m"/Users/michael/Documents/02_dev/03_portfolio/02_michael/themes/LoveIt/layouts
/partials/plugin/img.html:7:34"e[0m: execute of template failed at <.Width>: error calling 
Width: this method is only available for raster images. To determine if an image is SVG, 
you can do {{ if eq .MediaType.SubType "svg" }}{{ end }}

The error message is quite clear: your code calls Width on an object that does not support this.

Hey chrillek, thanks for the input, yes i realized that the issue says it is related to the widht, but this is not my code, it’s the theme, and thought maybe I needed to change some settings or place my svg images in a different folder, but if I have to change the layout I am not sure how to do that. I have the LoveIt theme

From the error message:

Maybe the theme developer should follow their own advice. If not, you have to override the img.html template that’s causing the problem.

BTW: It would be helpful to post error messages as code, i.e. between three backticks
```
code or message goes here
```
It’s a lot easier to read then.

thanks for the tips, I edited my original post to place the error message in a code block, did not realize I could use this syntax at first.
so in which file / folder would I place this → {{ if eq .MediaType.SubType “svg” }}{{ end }}

thanks

The LoveIt was not designed to use SVG images. Either create raster images from your SVGs, or raise an issue with the theme author..

ah thanks again, that is so helpful. Now would it be really involved for me to tweak code to make svg work, or not worth the headache and just go with your suggestion of creating raster images instead ?

Yeah, that one.

1 Like

ok, how did you find out that my theme does not support svg please ? I thought I read the documentation properly but maybe missed that part. I would like to know so that I maybe able to check for my next theme. thanks again

Try placing it in the static folder vs the assets folder.

The theme pipes images through
https://github.com/dillonzq/LoveIt/blob/master/layouts/partials/plugin/img.html

Grabbing an SVG as a page or global resource is fine, but the .Width and .Height methods only work with raster images.

1 Like

great thanks

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