diff --git a/assets/css/theme.css b/assets/css/theme.css
index 44d3660e95..dcca5144fa 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -443,6 +443,7 @@ article .R-taxonomy.tags a.term-link:hover:after {
   z-index: 70;
 }
 
+#R-body svg,
 #R-body img,
 #R-body figure > figcaption > h4,
 #R-body figure > figcaption > p,
@@ -454,25 +455,30 @@ article .R-taxonomy.tags a.term-link:hover:after {
   text-align: center;
 }
 
+#R-body svg:not(.lightbox-image).left,
 #R-body img:not(.lightbox-image).left {
   margin-left: 0;
 }
 
+#R-body svg:not(.lightbox-image).right,
 #R-body img:not(.lightbox-image).right {
   margin-right: 0;
 }
 
+#R-body svg:not(.lightbox-image).border,
 #R-body img:not(.lightbox-image).border,
 #R-body .video-container.border {
   background-clip: padding-box;
   border: 1px solid rgba(134, 134, 134, 0.333);
 }
 
+#R-body svg:not(.lightbox-image).shadow,
 #R-body img:not(.lightbox-image).shadow,
 #R-body .video-container.shadow {
   box-shadow: 0 10px 30px rgba(176, 176, 176, 0.666);
 }
 
+#R-body svg:not(.lightbox-image).inline,
 #R-body img:not(.lightbox-image).inline {
   display: inline;
   margin: 0;
@@ -549,13 +555,20 @@ article a:focus,
 article a:hover .copy-to-clipboard,
 article a:active .copy-to-clipboard,
 article a:focus .copy-to-clipboard,
+article a.lightbox-back:hover > svg:only-child:empty,
+article a.lightbox-back:active > svg:only-child:empty,
+article a.lightbox-back:focus > svg:only-child:empty,
 article a.lightbox-back:hover > img:only-child:empty,
 article a.lightbox-back:active > img:only-child:empty,
-article a.lightbox-back:focus > img:only-child:empty article .btn > button:hover,
+article a.lightbox-back:focus > img:only-child:empty,
+article .btn > button:hover,
 article .btn > button:active,
 article .btn > button:focus {
   outline: none;
 }
+article a:hover > svg:only-child:empty,
+article a:active > svg:only-child:empty,
+article a:focus > svg:only-child:empty,
 article a:hover > img:only-child:empty,
 article a:active > img:only-child:empty,
 article a:focus > img:only-child:empty {
@@ -2246,6 +2259,7 @@ article ul > li > input[type='checkbox']:checked::before {
   display: flex;
 }
 
+.lightbox-back svg,
 .lightbox-back img {
   background-color: var(--INTERNAL-MAIN-BG-color);
   max-height: 95%;
diff --git a/docs/config/_default/params.toml b/docs/config/_default/params.toml
index 9e53e9cbda..75efdc8ffb 100644
--- a/docs/config/_default/params.toml
+++ b/docs/config/_default/params.toml
@@ -460,6 +460,10 @@ image.errorlevel = 'warning'
 
 # Default: false
 imageEffects.border = true
+# Default: false
+imageEffects.dataurl = false
+# Default: false
+imageEffects.inlinecontent = false
 # Default: true
 imageEffects.lazy = true
 # Default: true
diff --git a/docs/content/authoring/frontmatter/reference/frontmatter.toml b/docs/content/authoring/frontmatter/reference/frontmatter.toml
index 0960615e37..3451fb417e 100644
--- a/docs/content/authoring/frontmatter/reference/frontmatter.toml
+++ b/docs/content/authoring/frontmatter/reference/frontmatter.toml
@@ -280,6 +280,10 @@ image.errorlevel = ''
 
 # Default: false
 imageEffects.border = true
+# Default: false
+imageEffects.dataurl = false
+# Default: false
+imageEffects.inlinecontent = false
 # Default: true
 imageEffects.lazy = true
 # Default: true
diff --git a/docs/content/authoring/imageeffects.en.md b/docs/content/authoring/imageeffects.en.md
index c4c947ec64..864c8fe984 100644
--- a/docs/content/authoring/imageeffects.en.md
+++ b/docs/content/authoring/imageeffects.en.md
@@ -12,12 +12,14 @@ You can [define additional custom image effects and set defaults](configuration/
 
 The default image effects shipped with the theme are
 
-| Name     | Description                                                       |
-| -------- | ----------------------------------------------------------------- |
-| border   | Draws a light thin border around the image                        |
-| lazy     | Lets the image be lazy loaded                                     |
-| lightbox | The image will be clickable to show it enlarged                   |
-| shadow   | Draws a shadow around the image to make it appear hovered/glowing |
+| Name          | Description                                                       |
+| ------------- | ----------------------------------------------------------------- |
+| border        | Draws a light thin border around the image                        |
+| dataurl       | if the linked image points to a resource, it is converted to a base64 encoded dataurl |
+| inlinecontent | if the linked image points to a SVG resource, the content will be used instead of an `<img>` element, this is useful for applying additional CSS styles to the elements inside of the SVG which is otherwise impossible |
+| lazy          | Lets the image be lazy loaded                                     |
+| lightbox      | The image will be clickable to show it enlarged                   |
+| shadow        | Draws a shadow around the image to make it appear hovered/glowing |
 
 One way to use them is to add them as URL query parameter to each individually linked image.
 
@@ -32,6 +34,8 @@ Without any settings in your `hugo.toml` `imageEffects` defaults to
 {{< multiconfig >}}
 [imageEffects]
   border = false
+  dataurl = false
+  inlinecontent = false
   lazy = true
   lightbox = true
   shadow = false
@@ -54,6 +58,8 @@ The settings applied to the above image would be
 
 {{< multiconfig >}}
 border = true
+dataurl = false
+inlinecontent = false
 lazy = true
 lightbox = false
 shadow = false
diff --git a/docs/content/configuration/customization/imageeffects.en.md b/docs/content/configuration/customization/imageeffects.en.md
index 97445ccfa8..a949216695 100644
--- a/docs/content/configuration/customization/imageeffects.en.md
+++ b/docs/content/configuration/customization/imageeffects.en.md
@@ -17,6 +17,8 @@ If you don't configure anything in your `hugo.toml`, the image effects default t
 {{< multiconfig >}}
 [imageEffects]
   border = false
+  dataurl = false
+  inlinecontent = false
   lazy = true
   lightbox = true
   shadow = false
@@ -40,6 +42,8 @@ This would result in
 [imageEffects]
   bg-white = true
   border = true
+  dataurl = false
+  inlinecontent = false
   lazy = false
   lightbox = true
   shadow = false
diff --git a/docs/content/introduction/releasenotes/7/4.en.md b/docs/content/introduction/releasenotes/7/4.en.md
index 6be45392d1..ed0c54388b 100644
--- a/docs/content/introduction/releasenotes/7/4.en.md
+++ b/docs/content/introduction/releasenotes/7/4.en.md
@@ -35,6 +35,11 @@ weight = -4
 
   This helps to remove false negatives while still benefitting from the check for all other addresses.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} There are two new [image effects](authoring/imageeffects) that are usable if the linked image points to a resource:
+
+    - **dataurl**: resource is converted to a base64 encoded dataurl
+    - **inlinecontent**: in case of SVG resources, the content will be used instead of an `<img>` element, this is useful for applying additional CSS styles to the elements inside of the SVG which is otherwise impossible
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme supports the new [`source` output format](configuration/sitemanagement/outputformats/#source-support) which behaves similar in configuration as the `markdown` output format but allows the original Markdown source including the front matter of a page to be viewed.
 
   You can see this in action on the above linked page, accessible by clicking the {{% button style="transparent" icon="code" %}}{{% /button %}} topbar button.
diff --git a/layouts/partials/_relearn/imageAttributes.gotmpl b/layouts/partials/_relearn/imageAttributes.gotmpl
index e105483920..f41235826a 100644
--- a/layouts/partials/_relearn/imageAttributes.gotmpl
+++ b/layouts/partials/_relearn/imageAttributes.gotmpl
@@ -1,7 +1,7 @@
 {{- $attributes := .attributes | default dict }}
 {{- $height := "auto" }}
 {{- $width := "auto" }}
-{{- $effects := dict "border" false "lazy" true "lightbox" true "shadow" false }}
+{{- $effects := dict "border" false "dataurl" false "inlinecontent" false "lazy" true "lightbox" true "shadow" false }}
 {{- if .page.Site.Params.imageeffects }}
   {{- $effects = merge $effects .page.Site.Params.imageeffects }}
 {{- end }}
@@ -63,9 +63,17 @@
     {{- end }}
   {{- end }}
 {{- end }}
+{{- if and .linkObject $effects.inlinecontent }}
+  {{- $content := .linkObject.Content | replaceRE `(?s)^\s*<\?.*?\?>\s*` "" }}
+  {{- $attributes = merge $attributes (dict "content" $content) }}
+{{- else if and .linkObject $effects.dataurl }}
+  {{- $src := printf "data:%s;base64,%s" .linkObject.MediaType (.linkObject.Content | base64Encode) }}
+  {{- $attributes = merge $attributes (dict "src" $src) }}
+{{- else }}
+  {{- $attributes = merge $attributes (dict "src" .url) }}
+{{- end }}
 {{- if $attributes.class }}{{ $classes = $classes | append (split $attributes.class " ") }}{{ end }}
 {{- $attributes = merge $attributes (dict "class" (delimit $classes " ")) }}
-{{- $attributes = merge $attributes (dict "src" .url) }}
 {{- $attributes = merge $attributes (dict "style" (printf " height: %s; width: %s;%s" $height $width (index $attributes "style" | default ""))) }}
 {{- if $effects.lazy }}{{ $attributes = merge $attributes (dict "loading" "lazy") }}{{ end }}
 {{- return $attributes }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html
index 3ca43f9c43..ed30716bc2 100644
--- a/layouts/partials/shortcodes/image.html
+++ b/layouts/partials/shortcodes/image.html
@@ -8,12 +8,13 @@
 {{- $title := .title }}
 {{- $alt := .alt }}
 {{- $attributes := .attributes | default dict }}
+{{- $linkObject := "" }}
 {{- $u := urls.Parse .url }}
 {{- $src := $u.String }}
 {{- if $u.IsAbs }}
   {{- partialCached "_relearn/urlExists.gotmpl" (dict "url" .url "page" $page "type" "image") $u.String }}
 {{- else }}
-  {{- $linkObject := partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page "searchPage" false) }}
+  {{- $linkObject = partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page "searchPage" false) }}
   {{- if $linkObject }}
     {{- $src = partial "_relearn/decoratedLink.gotmpl" (dict "url" .url "page" $page "linkObject" $linkObject "param" "image") }}
   {{- else }}
@@ -23,7 +24,7 @@
   {{- end }}
 {{- end }}
 {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "_relearn/makeRandomMd5.gotmpl" $page) .id }}
-{{- $attributes = merge $attributes (partial "_relearn/imageAttributes.gotmpl" (dict "url" $src "page" $page)) }}
+{{- $attributes = merge $attributes (partial "_relearn/imageAttributes.gotmpl" (dict "url" $src "page" $page "linkObject" $linkObject)) }}
 {{- $attributes = merge $attributes (dict "alt" $alt "title" ($title | transform.HTMLEscape)) }}
 {{- $classes := split $attributes.class " " }}
 {{- $isLightbox := in $classes "lightbox" }}
@@ -33,30 +34,40 @@
 {{- $attributes_figure := $attributes }}
 {{- $attributes_figure = merge $attributes_figure (dict "class" (delimit ((split $attributes_figure.class " ") | append "figure-image") " ")) }}
 {{- $attributes_figure = merge $attributes_figure (dict "style" (index $attributes_figure "style")) -}}
-<img
-  {{- range $k, $v := $attributes_figure }}
-    {{- if $v }}
-      {{- if eq (printf "%T" $v) "bool" }}
-        {{- printf " %s" $k | safeHTMLAttr }}
-      {{- else }}
-        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-      {{- end }}
-    {{- end }}
-  {{- end }}>
+{{- partial "partials/inline/img" (dict "attributes" $attributes_figure) }}
 {{- if $isLightbox -}}
 </a>
 <a href="javascript:history.back();" class="lightbox-back" id="R-image-{{ $id }}">
 {{- $attributes_lightbox := $attributes }}
 {{- $attributes_lightbox = merge $attributes_lightbox (dict "class" (delimit ((split $attributes_lightbox.class " ") | append "lightbox-image") " ")) }}
 {{- $attributes_lightbox = merge $attributes_lightbox (dict "style" "") -}}
-<img
-  {{- range $k, $v := $attributes_lightbox }}
-    {{- if $v }}
-      {{- if eq (printf "%T" $v) "bool" }}
-        {{- printf " %s" $k | safeHTMLAttr }}
-      {{- else }}
-        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+{{- partial "partials/inline/img" (dict "attributes" $attributes_lightbox) }}</a>
+{{- end }}
+
+{{- define "partials/inline/img" }}
+  {{- if .attributes.content }}
+    {{- $attrs := ""}}
+    {{- range $k, $v := .attributes }}
+      {{- if eq $k "content" }}
+      {{- else if $v }}
+        {{- if eq (printf "%T" $v) "bool" }}
+          {{- $attrs = printf "%s %s" $attrs $k | safeHTMLAttr }}
+        {{- else }}
+          {{- $attrs = printf "%s %s=%q" $attrs $k $v | safeHTMLAttr }}
+        {{- end }}
       {{- end }}
     {{- end }}
-  {{- end }}></a>
+    {{- printf (.attributes.content | replaceRE "^<svg" (printf "<svg%s" $attrs)) | safeHTML }}
+  {{- else -}}
+    <img
+      {{- range $k, $v := .attributes }}
+        {{- if $v }}
+          {{- if eq (printf "%T" $v) "bool" }}
+            {{- printf " %s" $k | safeHTMLAttr }}
+          {{- else }}
+            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+          {{- end }}
+        {{- end }}
+      {{- end }}>
+  {{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/link.html b/layouts/partials/shortcodes/link.html
index e2a40b2ef4..cd135301f6 100644
--- a/layouts/partials/shortcodes/link.html
+++ b/layouts/partials/shortcodes/link.html
@@ -16,12 +16,13 @@
 {{- $content := .content }}
 {{- /* target will be boolean false if no user defined value was set and effect default should be applied */}}
 {{- $target := false }}
+{{- $linkObject := "" }}
 {{- $u := urls.Parse .url }}
 {{- $href := $u.String }}
 {{- if $u.IsAbs }}
   {{- partialCached "_relearn/urlExists.gotmpl" (dict "url" .url "page" $page "type" "link") $u.String }}
 {{- else }}
-  {{- $linkObject := partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page) }}
+  {{- $linkObject = partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page) }}
   {{- if $linkObject }}
     {{- $href = partial "_relearn/decoratedLink.gotmpl" (dict "url" .url "page" $page "linkObject" $linkObject "param" "link") }}
   {{- else }}
@@ -30,7 +31,7 @@
     {{- partial "_relearn/urlErrorReport.gotmpl" (dict "url" .url "page" $page "param" "link" "msg" $msg) }}
   {{- end }}
 {{- end }}
-{{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "target" .target)) -}}
+{{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "linkObject" $linkObject "target" .target)) -}}
 <a
   {{- range $k, $v := $attributes }}
     {{- if $v }}
diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt
index efbb1a11e3..1244be4335 100644
--- a/layouts/partials/version.txt
+++ b/layouts/partials/version.txt
@@ -1 +1 @@
-7.3.2+a3e0b7f4f469703ed2fec432b332f17e0066d70a
\ No newline at end of file
+7.3.2+adb82b040f7cda6de4d78892bb580a62f248d5ef
\ No newline at end of file