Can’t upload SVG-file with external style sheet reference?

Hi there,

Firstly, thanks for using my plugin ??

So, my plugin allows you to automatically swap the IMG with the inline SVG just by adding a custom class style-svg to your IMG tag. But it sounds like you took another route by modifying your header.

I’m not sure why you couldn’t style something with your stylesheet… That sounds odd to me.

And there is every possibility that your SVG file has extraneous code in it causing issues.

Can you please provide some links and the SVG file. It’s hard to speculate without the content.

Cheers
Ben

Unfortunately the site I’m working on isn’t live yet and will eventually be used for a corporate intranet, so I can’t share a URL. If you want, I can share the code of the SVG-file though.

The first line of the SVG-file’s contents, which makes me associate my issue with the other one I’d already mentioned, is this:
<?xml-stylesheet type="text/css" href="/svg-logo.css" ?>

The style sheet works, but I had to place the SVG-file manually and hard-code the URL to it in the header.php file to get it working.

Ok fair enough.
So I feel like your approach might be the issue.
I would need your entire SVG code or file.
Any styles should not be in your SVG, they should be in your child theme stylesheet.

You also shouldn’t need to hard code the SVG source into the header file. But that is to do with the theme.

Without access to the site, it’s hard for me to look into that part. If you can shoot me the parent and child theme and your SVG file, I can test on my own setup and help out.

The entire SVG-file’s contents are:

<?xml-stylesheet type="text/css" href="/sandbox/wp-content/themes/Divi-child/svg-logo.css" ?>
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="220" height="79" viewBox="0 0 220 79">
  <defs>
    <filter id="filter" x="1" y="-2" width="217" height="82" filterUnits="userSpaceOnUse">
      <feOffset result="offset" dx="1" dy="1.732" in="SourceAlpha"/>
      <feGaussianBlur result="blur" stdDeviation="2.236"/>
      <feFlood result="flood" flood-color="#020202" flood-opacity="0.21"/>
      <feComposite result="composite" operator="in" in2="blur"/>
      <feGaussianBlur result="blur-2" stdDeviation="1.333" in="SourceAlpha"/>
      <feComposite result="composite-2"/>
      <feComposite result="composite-3"/>
      <feComposite result="composite-4"/>
      <feFlood result="flood-2" flood-opacity="0.15"/>
      <feComposite result="composite-5" operator="in" in2="composite-4"/>
      <feBlend result="blend" mode="multiply" in2="composite"/>
      <feBlend result="blend-2" in="SourceGraphic"/>
      <feImage preserveAspectRatio="none" x="4.03125" y="1" width="207.907" height="72" result="image" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjA3LjkwNyIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDIwNy45MDcgNzIiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIG9wYWNpdHk6IDAuMjM7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSI2Ny45NTMiIHkxPSI3MiIgeDI9IjEzOS45NTMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDIwMjAyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmZiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjA3LjkwNyIgaGVpZ2h0PSI3MiIvPgo8L3N2Zz4K"/>
      <feComposite result="composite-6" operator="in" in2="SourceGraphic"/>
      <feBlend result="blend-3" in2="blend-2"/>
    </filter>
  </defs>
  <path id="schaduw" class="cls-1 logo-shaduw" d="M21.978,3L209.237,1c2.768,0,3.035,4.739,2.451,7.5L200.076,66.667A8.312,8.312,0,0,1,192.187,73H10.44C6.289,73,3.3,70.476,4.175,66.333L15.91,8.5C16.494,5.739,19.211,3,21.978,3Z"/>
  <path id="witrand" class="cls-2 logo-witrand" d="M22.962-.088H207.3a4.11,4.11,0,0,1,4.131,5.224L199.077,66.773A6.806,6.806,0,0,1,192.737,72H8.4A4.11,4.11,0,0,1,4.27,66.773L16.623,5.135A6.806,6.806,0,0,1,22.962-.088Z"/>
  <path id="donkerblauw" class="cls-3 logo-dblauw" d="M23.785,1.5H205.6a3.934,3.934,0,0,1,3.955,5l-11.825,59a6.513,6.513,0,0,1-6.068,5H9.846a3.934,3.934,0,0,1-3.954-5l11.824-59A6.514,6.514,0,0,1,23.785,1.5Z"/>
  <path id="lichtblauw" class="cls-4 logo-lblauw" d="M147.566,1.5H205.6a3.934,3.934,0,0,1,3.955,5l-11.825,59a6.513,6.513,0,0,1-6.068,5H133.628Z"/>
  <path id="paraplu-schaduw" class="cls-5 logo-paraplu-shaduw" d="M195.177,17.619c-3.958-2.749-9.789-4.32-16.5-4.468l0.289-1.628a0.84,0.84,0,0,0-.859-1.022,1.287,1.287,0,0,0-1.222,1.022l-0.289,1.628A39.52,39.52,0,0,0,158.5,17.619c-5.7,3.176-9.217,7.673-10.165,13.006a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021c0.3-1.707,2.338-3.1,4.536-3.1s3.748,1.389,3.445,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021c0.3-1.707,2.337-3.1,4.534-3.1s3.747,1.389,3.443,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021,4.229,4.229,0,0,1,3.482-2.985l-4.873,27.4C168.56,58.328,170.433,61,173.319,61s5.7-2.673,6.288-5.959a0.84,0.84,0,0,0-.859-1.021,1.286,1.286,0,0,0-1.222,1.021c-0.384,2.16-2.108,3.916-3.844,3.916s-2.841-1.757-2.457-3.916l4.873-27.4c1.632,0.357,2.671,1.558,2.417,2.985a0.84,0.84,0,0,0,.859,1.021,1.285,1.285,0,0,0,1.222-1.021c0.3-1.707,2.34-3.1,4.539-3.1s3.743,1.389,3.439,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021c0.3-1.707,2.341-3.1,4.542-3.1s3.742,1.389,3.438,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021C201.665,25.292,199.749,20.8,195.177,17.619Zm0.383,7.868a7.735,7.735,0,0,0-5.434,2.265,5.3,5.3,0,0,0-4.628-2.265,7.731,7.731,0,0,0-5.431,2.265,5.3,5.3,0,0,0-4.626-2.265,7.739,7.739,0,0,0-5.436,2.266,5.306,5.306,0,0,0-4.631-2.266,7.722,7.722,0,0,0-5.428,2.265,5.307,5.307,0,0,0-4.632-2.265,7.694,7.694,0,0,0-3.278.753c3.854-6.684,13.458-11.06,25.237-11.06s19.826,4.376,21.3,11.061A6.07,6.07,0,0,0,195.56,25.487Z"/>
  <path id="intranet-schaduw" class="cls-5 logo-intranet-shaduw" d="M20.164,62.215h1.183l1.483-10.5H21.647ZM37.3,58.2l-0.341,2.58L26.678,51.714H25.5l-1.483,10.5h1.183l1.263-8.961,10.284,8.961h1.183l1.483-10.5H38.226Zm17.42-5.361,0.16-1.12H41.412l-0.16,1.12h6.134l-1.323,9.381h1.183l1.323-9.381h6.155Zm0.68,9.381h1.183l0.521-3.76h5.132l5.513,3.76h1.864l-5.633-3.8,1.363,0.02c2.426,0,4.852-1.06,4.852-3.82,0-2.14-1.764-2.9-4.07-2.9H56.887Zm1.864-4.78,0.642-4.64h8.059c1.684,0,2.987.48,2.987,1.98,0,1.92-1.524,2.66-3.649,2.66H57.267Zm17.058,2.2h9.643l1.564,2.58h1.383l-5.974-10.5H79.6l-8.921,10.5H72.06Zm9.182-1.12h-8.4l0.822-.92,4.19-4.84,2.807,4.84Zm18.182-.32-0.341,2.58L91.064,51.714H89.881L88.4,62.215H89.58l1.263-8.961,10.284,8.961h1.183l1.484-10.5h-1.183Zm16.236,4.02,0.161-1.12H106.3l0.521-3.74h10.465l0.16-1.08H106.979l0.482-3.44h11.446l0.161-1.12h-12.63l-1.483,10.5h12.97ZM134.4,52.835l0.16-1.12H121.091l-0.16,1.12h6.134l-1.323,9.381h1.183l1.323-9.381H134.4Z"/>
  <path id="BCS-schaduw" class="cls-6 logo-bcs-shaduw" d="M59.983,37.386a9.606,9.606,0,0,0,.234-2.24c0-3.127-1.544-5.414-4.724-5.74,4.163-.84,6.876-3.967,6.876-8.96,0-5.74-5.8-7.14-11.226-7.14h-22.5L21.487,47H43.611C50.394,47,58.346,45.087,59.983,37.386Zm-9.215-.607c-0.468,2.24-2.432,4.107-5.847,4.107H31.5l1.777-8.307H46.652c2.947,0,4.21,1.4,4.21,3.267A6.321,6.321,0,0,1,50.768,36.78ZM34.584,26.466l1.5-7.094h13c2.807,0,3.789,1.167,3.789,2.66,0,2.053-1.169,4.433-5.286,4.433h-13ZM80.421,47.56A33.624,33.624,0,0,0,96,43.78l-1.871-5.274A28.929,28.929,0,0,1,82.9,41.12c-6.736,0-9.308-3.827-9.308-8.214A13.612,13.612,0,0,1,87.578,19.185a21.52,21.52,0,0,1,10.1,2.613l4.116-5.274c-3.227-2.193-7.624-3.78-13.8-3.78-13.425,0-21.7,7.047-23.9,17.408a20.819,20.819,0,0,0-.468,4.34C63.629,42.426,69.1,47.56,80.421,47.56Zm19.035-2.52c4.21,1.82,10.852,2.52,16.231,2.52,7.11,0,17.869-1.167,20.02-11.107a11.313,11.313,0,0,0,.281-2.38c0-11.761-22.452-5.647-22.452-11.247,0-2.754,3.461-3.92,10.01-3.92a33.06,33.06,0,0,1,12.161,2.007l2.713-5.507c-3.835-1.82-9.121-2.66-14.313-2.66-6.97,0-17.073,1.494-19.084,10.874a10.84,10.84,0,0,0-.281,2.334c0,11.527,22.5,5.227,22.5,10.92,0,3.687-6.081,4.387-10.758,4.387a45.174,45.174,0,0,1-14.127-2.147Z"/>
  <path id="paraplu" data-name="paraplu" class="cls-2 logo-paraplu" d="M194.177,16.619c-3.958-2.749-9.789-4.32-16.5-4.468l0.289-1.628a0.84,0.84,0,0,0-.859-1.022,1.287,1.287,0,0,0-1.222,1.022l-0.289,1.628A39.52,39.52,0,0,0,157.5,16.619c-5.7,3.176-9.217,7.673-10.165,13.006a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021c0.3-1.707,2.338-3.1,4.536-3.1s3.748,1.389,3.445,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021c0.3-1.707,2.337-3.1,4.534-3.1s3.747,1.389,3.443,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021,4.229,4.229,0,0,1,3.482-2.985l-4.873,27.4C167.56,57.328,169.433,60,172.319,60s5.7-2.673,6.288-5.959a0.84,0.84,0,0,0-.859-1.021,1.286,1.286,0,0,0-1.222,1.021c-0.384,2.16-2.108,3.916-3.844,3.916s-2.841-1.757-2.457-3.916l4.873-27.4c1.632,0.357,2.671,1.558,2.417,2.985a0.84,0.84,0,0,0,.859,1.021,1.285,1.285,0,0,0,1.222-1.021c0.3-1.707,2.34-3.1,4.539-3.1s3.743,1.389,3.439,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021c0.3-1.707,2.341-3.1,4.542-3.1s3.742,1.389,3.438,3.1a0.84,0.84,0,0,0,.859,1.021,1.286,1.286,0,0,0,1.222-1.021C200.665,24.292,198.749,19.8,194.177,16.619Zm0.383,7.868a7.735,7.735,0,0,0-5.434,2.265,5.3,5.3,0,0,0-4.628-2.265,7.731,7.731,0,0,0-5.431,2.265,5.3,5.3,0,0,0-4.626-2.265,7.739,7.739,0,0,0-5.436,2.266,5.306,5.306,0,0,0-4.631-2.266,7.722,7.722,0,0,0-5.428,2.265,5.307,5.307,0,0,0-4.632-2.265,7.694,7.694,0,0,0-3.278.753c3.854-6.684,13.458-11.06,25.237-11.06s19.826,4.376,21.3,11.061A6.07,6.07,0,0,0,194.56,24.487Z"/>
  <path id="intranet" data-name="intranet" class="cls-7 logo-intranet" d="M19.164,61.215h1.183l1.483-10.5H20.647ZM36.3,57.2l-0.341,2.58L25.678,50.714H24.5l-1.483,10.5h1.183l1.263-8.961,10.284,8.961h1.183l1.483-10.5H37.226Zm17.42-5.361,0.16-1.12H40.412l-0.16,1.12h6.134l-1.323,9.381h1.183l1.323-9.381h6.155Zm0.68,9.381h1.183l0.521-3.76h5.132l5.513,3.76h1.864l-5.633-3.8,1.363,0.02c2.426,0,4.852-1.06,4.852-3.82,0-2.14-1.764-2.9-4.07-2.9H55.887Zm1.864-4.78,0.642-4.64h8.059c1.684,0,2.987.48,2.987,1.98,0,1.92-1.524,2.66-3.649,2.66H56.267Zm17.058,2.2h9.643l1.564,2.58h1.383l-5.974-10.5H78.6l-8.921,10.5H71.06Zm9.182-1.12h-8.4l0.822-.92,4.19-4.84,2.807,4.84Zm18.182-.32-0.341,2.58L90.064,50.714H88.881L87.4,61.215H88.58l1.263-8.961,10.284,8.961h1.183l1.484-10.5h-1.183Zm16.236,4.02,0.161-1.12H105.3l0.521-3.74h10.465l0.16-1.08H105.979l0.482-3.44h11.446l0.161-1.12h-12.63l-1.483,10.5h12.97ZM133.4,51.835l0.16-1.12H120.091l-0.16,1.12h6.134l-1.323,9.381h1.183l1.323-9.381H133.4Z"/>
  <path id="BCS" data-name="BCS" class="cls-2 logo-bcs" d="M58.983,36.386a9.606,9.606,0,0,0,.234-2.24c0-3.127-1.544-5.414-4.724-5.74,4.163-.84,6.876-3.967,6.876-8.96,0-5.74-5.8-7.14-11.226-7.14h-22.5L20.487,46H42.611C49.394,46,57.346,44.087,58.983,36.386Zm-9.215-.607c-0.468,2.24-2.432,4.107-5.847,4.107H30.5l1.777-8.307H45.652c2.947,0,4.21,1.4,4.21,3.267A6.321,6.321,0,0,1,49.768,35.78ZM33.584,25.466l1.5-7.094h13c2.807,0,3.789,1.167,3.789,2.66,0,2.053-1.169,4.433-5.286,4.433h-13ZM79.421,46.56A33.624,33.624,0,0,0,95,42.78l-1.871-5.274A28.929,28.929,0,0,1,81.9,40.12c-6.736,0-9.308-3.827-9.308-8.214A13.612,13.612,0,0,1,86.578,18.185a21.52,21.52,0,0,1,10.1,2.613l4.116-5.274c-3.227-2.193-7.624-3.78-13.8-3.78-13.425,0-21.7,7.047-23.9,17.408a20.819,20.819,0,0,0-.468,4.34C62.629,41.426,68.1,46.56,79.421,46.56Zm19.035-2.52c4.21,1.82,10.852,2.52,16.231,2.52,7.11,0,17.869-1.167,20.02-11.107a11.313,11.313,0,0,0,.281-2.38c0-11.761-22.452-5.647-22.452-11.247,0-2.754,3.461-3.92,10.01-3.92a33.06,33.06,0,0,1,12.161,2.007l2.713-5.507c-3.835-1.82-9.121-2.66-14.313-2.66-6.97,0-17.073,1.494-19.084,10.874a10.84,10.84,0,0,0-.281,2.334c0,11.527,22.5,5.227,22.5,10.92,0,3.687-6.081,4.387-10.758,4.387a45.174,45.174,0,0,1-14.127-2.147Z"/>
</svg>

What I’ve done is replace the (Divi) theme’s default logo code with:
<object data="[url to SVGlogo]" type="image/svg+xml" id="logo" data-height-percentage="90"> <img src="[theme standard code for logo]" id="logo-fallback" data-height-percentage="90"></object>

Without changing the theme’s default logo code to using object-tags, I can’t style the SVG file with external CSS as the theme uses an img-tag.

I’ll look into getting external access working for the site, in case you need to check the pages/codes.

Hi there,
Sorry for the late reply, I didn’t get a notification for some reason.

So you should be able to just add to your child theme header’s logo img tag class="style-svg" and then use your SVG in the normal logo section in Divi settings and it will be replaced with inline code on the front end.

It seems notifications are borked, as I didn’t get any for support posts I made for a couple different plugins.

I’ll take a look-see at the header file and add the class. Thanks for your help.

No problem, it happens… as a developer it can be frustrating if a user is waiting for my support and I didn’t get the initial notification. It’s pretty rare though in my experience.

I’ll mark this as resolved then, but do let me know how you go or if you have any further issues.

Thanks
Ben