1

I'm trying to use a svg file that contains a vector and an image, the problem however is that the linked image in the svg won't load. The vector part of the svg is loading however. I figure the problem has to do with how wordpress loads its files. Both the image and the svg file are located in the image folder of my wordpress theme. I've tried linking to the file by using the file path with xlink:href="wp-content/themes/my-theme/assets/img/ulu-moskee.png" and xlink:href="wordpress/wp-content/themes/my-theme/assets/img/ulu-moskee.png". I've also tried linking to where the file is hosted with xlink:href="www.mysite.com/wp-content/themes/my-theme/assets/img/ulu-moskee.png" Despite these attempts, the image is still not loading. I'm seeking guidance on the correct path to use for xlink:href or any potential issues with how WordPress handles SVG images. Any insights or suggestions on resolving this issue would be greatly appreciated! Thanks in advance.

INDEX.PHP:

<div class="home"><img id="svg" src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/ulu-home.svg' ); ?>" alt=""></div>

SVG FILE:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1569.79" height="870.31" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1569.79 870.31">
  <defs>
    <style>
      .cls-1 {
        fill: #4483e2;
      }

      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: none;
      }

      .cls-3 {
        fill: #4783e3;
      }

      .cls-4 {
        clip-path: url(#clippath);
      }
    </style>
    <clipPath id="clippath">
      <path class="cls-2" d="m773.06,44.54c5.02,27.93,34.39,97.56,187.46,214.51,162.74,124.37,172.31,347.2,169.23,434.55,4.49,1.75,123.07,65,123.07,65h-479.75s-479.75,0-479.75,0c0,0,118.58-63.25,123.07-65-3.08-87.35,6.48-310.18,169.23-434.55,153.07-116.96,182.44-186.58,187.46-214.51Z"/>
    </clipPath>
  </defs>
  <g class="cls-4">
    <image width="1920" height="1040" transform="translate(0 20.01) scale(.82)" xlink:href="ulu-moskee.png"/>
  </g>
  <path class="cls-3" d="m793.8,30.39c-3.24,8.28-11.31,14.15-20.74,14.15-12.3,0-22.27-9.97-22.27-22.27s9.97-22.27,22.27-22.27c1.28,0,2.54.11,3.76.32-8.43,1.6-14.81,9.01-14.81,17.9,0,10.07,8.16,18.23,18.22,18.23,5.39,0,10.24-2.34,13.57-6.06Z"/>
  <polygon class="cls-1" points="784.06 3.05 786.72 11.24 795.33 11.24 788.37 16.31 791.03 24.5 784.06 19.44 777.09 24.5 779.75 16.31 772.78 11.24 781.4 11.24 784.06 3.05"/>
</svg>
3
  • I don't know SVGs specifically but those look like relative links that assume they're relative to / - is that right? That won't be true on other pages, and may not even be true on the home page if the links are automatically relative to the SVG file (?). Can you try adding a leading / to make them relative to the site root? I think for your www one you'd at least need //:, or maybe the complete https:// to tell the browser that it's an absolute link.
    – Rup
    Commented Jan 31 at 23:51
  • Can you make this work with static HTML pages outside of WordPress? I'm guessing this isn't specifically a WordPress problem.
    – Rup
    Commented Jan 31 at 23:51
  • Unfortunately, you'll need to first upload the PNG and then manually edit the SVG file to include the path of the linked PNG - it'll be broken everywhere except on the site. (In this use case I normally embed the SVG in the file I'm adding it to rather than bringing it in as an image, so I'd put the SVG code into the index.php and just link in the embedded file.) Commented Feb 1 at 2:28

1 Answer 1

0

It doesn't seem to be a wordpress issue but it has to do with how recursion works in svg files see the answer to this question for more details. Like @tony-djukic replied the way to go is by embedding the image in the svg file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.