fix: change broken img look

assets/scss/_styles_project.scss

@@ -74,10 +74,23 @@
 
 .sp-service-icon {
   margin-top: -4rem;
+  min-height: 6rem;
+  min-width: 4rem;
   max-width: 12rem;
   max-height: 8rem;
   margin-left: 2rem;
   width: max-content;
+  & > .error {
+    min-height: 6rem;
+    min-width: 4rem;
+  }
+}
+
+.sp-feature-img {
+  min-height: 20rem;
+  min-width: 20rem;
+  max-width: 40rem;
+  max-height: 40rem;
 }
 
 .sp-service-card {
@@ -92,8 +105,9 @@
 }
 
 .sp-supperted-by-img {
-  max-height: 5rem;
+  pointer-events: none;
   margin: 1rem;
+  width: 15rem;
 }
 
 .sp-supported-by-list {
@@ -129,3 +143,12 @@ a.nav-link.sp-coming-soon {
     border-radius: .1rem;
   }
 }
+
+.sp-feature-img.error {
+  min-width: 20rem;
+  min-height: 20rem;
+}
+
+.error {
+  background-color: lightgray;
+}

content/en/_index.html

@@ -193,10 +193,14 @@ linkTitle = "SelfPrivacy"
 <div class="card sp-supported-by-card h-100">
 	<div class="card-body sp-supported-by-list">
 		<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
+			<object role="img" aria-label="NLnet foundation" class="d-flex justify-content-center align-items-center sp-supperted-by-img" type="image/svg+xml" data="/images/logos/nlnet.svg">
+                <div class="error">NLnet foundation</div>
+            </object>
 		</a>
 		<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
+			<object role="img" aria-label="Privacy Accelerator" class="d-flex justify-content-center align-items-center sp-supperted-by-img" type="image/svg+xml" data="/images/logos/PrivacyAcceleratorLogo.svg">
+                <div class="error">Privacy Accelerator</div>
+            </object>
 		</a>
     </div>
 </div>

layouts/shortcodes/landing-feature.html

@@ -11,13 +11,17 @@
         </div>
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
-            <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
+            <object role="img" class="d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
+                <div class="error sp-feature-img"></div>
+            </object>
         </div>
         {{ end }}
     {{ else }}
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
-            <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
+            <object role="img" class="d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
+                <div class="error sp-feature-img"></div>
+            </object>
         </div>
         {{ end }}
         <div class="col-md-8 col-xs-12 my-auto px-5">

layouts/shortcodes/landing-service.html

@@ -1,7 +1,9 @@
 {{ $illustration := .Get 0 }}
 {{ $title := .Get 1 }}
 <div class="card sp-service-card h-100">
-    <img class="card-img-top rounded-img sp-service-icon" src="{{ $illustration }}" alt="">
+    <object class="d-flex justify-content-center align-items-center card-img-top sp-service-icon" type="image/svg+xml" data="{{ $illustration }}">
+        <div class="error"></div>
+    </object>
     <div class="card-body">
         <h4 class="card-title">{{ $title }}</h4>
         {{ .Inner }}

static/images/logos/nlnet.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <!-- Created using Karbon14, part of koffice: http://www.koffice.org/karbon -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449px" height="168px">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449px" height="170px" viewBox="0 0 449 168">
   <defs>
   </defs>
   <g id="Layer">