Support » Plugin: SVG Support » Can’t upload SVG-file with external style sheet reference?

  • Resolved Roland

    (@pmcbrabant)


    I’ve added an SVG logo to a site I’m making, but due to the way the logo gets added to the pages (img) it doesn’t allow for styling through an external style sheet. I’ve modified the header.php in a child theme so the logo will get embedded as an object, but now I can’t upload the SVG-file.

    Another topic about being unable to upload certain SVG-files (https://wordpress.org/support/topic/some-files-not-allowed-to-upload/) suggests it’s due to xml declarations in the SVG. Is that what’s causing my issue as well? If so, how can I work around this, as I need to be able to style the logo via CSS.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    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

    Thread Starter Roland

    (@pmcbrabant)

    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.

    Plugin Author Benbodhi

    (@benbodhi)

    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.

    Thread Starter Roland

    (@pmcbrabant)

    The entire SVG-file’s contents are:

    <?xml-stylesheet type="text/css" href="/sandbox/wp-content/themes/Divi-child/svg-logo.css" ?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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.

    Plugin Author Benbodhi

    (@benbodhi)

    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.

    Thread Starter Roland

    (@pmcbrabant)

    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.

    Plugin Author Benbodhi

    (@benbodhi)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can’t upload SVG-file with external style sheet reference?’ is closed to new replies.