SVG images not showing

Technical Q&A
,

Topic summary

A developer is troubleshooting SVG image display issues in a custom Shopify theme. While other image formats render correctly in the theme customizer, SVG files fail to appear.

Code provided includes:

  • CSS styling for image layout with flex-direction controls
  • Responsive padding settings
  • Section schema with image picker fields
  • Liquid template logic for conditional image rendering

Key technical details:

  • Images are uploaded through the customizer interface
  • The code uses Shopify’s image_url filter with ‘master’ parameter
  • Template includes two image picker settings (image1 and image2)
  • Standard <img> tags are used for rendering

Current status: The issue remains unresolved with no responses yet. The problem likely relates to how Shopify’s image processing handles SVG files versus raster formats, or potentially missing width/height attributes in the img tags that SVGs typically require for proper display.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I created a custom theme in that all images are showing when I upload it in customizer but it doesn’t show SVG images , what could be the reason? Please help!! Below is my section code :

{% stylesheet %}
.image-reverse {
flex-direction: row-reverse;
}
.row {
display: flex;
}

.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}

{% endstylesheet %}

{{ section.settings.title }}

{{ section.settings.content }}

{%- if section.settings.image1 != blank -%} {{ section.settings.image1.alt }} {% endif %}
{%- if section.settings.image2 != blank -%} {{ section.settings.image2.alt }} {% endif %}
{% schema %} { "name": "Image", "settings": [ { "type": "color_scheme", "id": "color_scheme", "label": "Color Scheme", "default": "scheme-1" }, { "type": "checkbox", "id": "full_width", "default": true, "label": "Enable Full Width" }, { "type":"text", "id":"title", "label":"Title" }, { "type":"richtext", "id":"content", "label":"Content" }, { "type":"image_picker", "id":"image1", "label":"Image 1" }, { "type":"image_picker", "id":"image2", "label":"Image 2" }, { "type": "select", "id": "layout", "options": [ { "value": "image_first", "label": "image_first" }, { "value": "text_first", "label": "text_first" } ], "default": "image_first", "label": "image_first" } ],

“presets”:[
{
“name”: “Image”
}
]
}
{% endschema %}