# Insert .svg through front matter

**URL:** <https://discourse.gohugo.io/t/insert-svg-through-front-matter/40320>\
**Category:** support\
**Created:** [September 1, 2022, 9:42pm UTC](https://discourse.gohugo.io/t/insert-svg-through-front-matter/40320 "2022-09-01T21:42:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bob3x255](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bob3x255/32/17445_2.png) [@bob3x255](https://discourse.gohugo.io/u/bob3x255)\
**Post date:** [September 1, 2022, 9:42pm UTC](https://discourse.gohugo.io/t/insert-svg-through-front-matter/40320/1 "2022-09-01T21:42:18Z")

</div>

Hi!

I would like to utilize svg in my Hugo website, however, I need to pass it through front matter parameter.  
I read through and tried solutions from related topics, e.g. [[SOLVED] Inject an SVG file into my HTML - #10 by rdwatters](https://discourse.gohugo.io/t/solved-inject-an-svg-file-into-my-html/7446/10).

I need to remake function around `.image` parameter, however, nothing seems to work and it either renders blank or shows URL. I am still new to Hugo.

Any help is appreciated. THANKS!

**UPD** : I figured out that the template was broken and I changed it (updated below), so it could work with .png and .gif. However, I still cannot make anything viable that would allow me to pass .svg through front matter variable just like pic.

**Template part I think I need to change:**

```auto
      <div class="rounded shadow bg-white p-5 tab-content" id="pills-tabContent">
          {{range $i, $t := .tablist}}
          <div class="tab-pane fade {{if eq $i 0}}show active{{end}}" id="pills-{{.title | lower | urlize}}" role="tabpanel" aria-labelledby="pills-{{.title | lower | urlize}}-tab">
            <div class="row align-items-center">
              <div class="col-md-8 order-1 order-md-0">
                <div class="content-block">
                  <h3 class="mb-4">{{ .title }}</h3>
                  <div class="content">{{ .description | markdownify }}</div>
                </div>
              </div>
              <div class="col-md-6 order-0 order-md-1 mb-5 mt-md-0">
                <div class="image-block text-center">
                  {{ if .image }}
                  {{ if fileExists (add `assets/` .image) }}
                  {{$img:= resources.Get (.image) }}
                  <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="img-fluid" width="{{$img.Width}}" height="{{$img.Height}}">
                  {{ end }}
                  {{ end }}
                </div>
              </div>
              </div>

```

**Front matter block**

```auto
  - title: " "
    description: " "
    image: "/images/my-svg.svg"

```

---

<div class="post-metadata">

**Author:** ![bob3x255](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bob3x255/32/17445_2.png) [@bob3x255](https://discourse.gohugo.io/u/bob3x255)\
**Post date:** [September 2, 2022, 1:42pm UTC](https://discourse.gohugo.io/t/insert-svg-through-front-matter/40320/2 "2022-09-02T13:42:05Z")

</div>

Fixed issue by adding condition to process raster images and svgs.  
Here’s update template:

```auto
                  {{ if .image }}
                  {{ if fileExists (add `assets/` .image) }}
                  {{$img := resources.Get (.image) }}
                  {{ if eq .MediaType.SubType "svg" }} 
                  <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="img-fluid" width="{{$img.Width}}" height="{{$img.Height}}">
                  {{ else }}
                  <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="img-fluid" width="1000px">
                  {{ end }}
                  {{ end }}
                  {{ end }}

```

Not sure if that’s correct way of doing things, however, it works.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [September 4, 2022, 1:42pm UTC](https://discourse.gohugo.io/t/insert-svg-through-front-matter/40320/3 "2022-09-04T13:42:16Z")

</div>

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