I manage a WordPress website (updates not development). We have an area on-site that shows rooms features. These are made up of individual SVG files for each feature. The site is set up for the files and all have been displaying with no issue (in the media library and on-page in the feature box on the live site).
We have added some additional features into rooms, so I asked my freelancer to create some additional SVG files to add to the features box and provided him with the current files to ensure continuality. I installed Safe SVG to enable me to upload them, they upload, but in the media library they have no thumbnail and when I follow the web address it comes up as a 404 error. When I try to add them to the feature box, they go in but on page they show up as a broken link.
This is my SVG code for one of my new files – can anyone look at it for me and see if there is anything going on in there that might be causing the issue? I have no idea about SVG, I have never worked with them before – I can possibly see the size is incorrect, as our current ones are 500 x 500 but the freelancer assures me they were set up the same size?
<svg id="Layer_4" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 493.32 336.43"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;stroke:#000;stroke-width:5px;}.cls-1,.cls-2{stroke-linecap:round;}.cls-1{stroke-miterlimit:10;}.cls-2,.cls-3{stroke-linejoin:round;}</style></defs><title>Cup_and_Kettle</title><path class="cls-1" d="M33.77,370.17q-.52,6.9-.53,14c0,47.68,18.1,89.39,45.14,112.22h95.08c27-22.83,45.15-64.54,45.15-112.22q0-7.11-.53-14H48.3" transform="translate(-1.5 -162.47)"/><path class="cls-1" d="M219.23,384.15c0,.35,0,.69,0,1,0,33.06-8.71,63.24-23.06,86.25a55.37,55.37,0,0,0,11.32,1.17c27.58,0,49.94-20.08,49.94-44.86C257.44,406.61,241.15,388.89,219.23,384.15Z" transform="translate(-1.5 -162.47)"/><path d="M90.31,362.58a4.38,4.38,0,0,1-1.33-.2c-4.38-1.4-10.41-3.91-12.18-9.66-1.91-6.19,2.19-12,6.15-17.52,6.71-9.42,8.81-13.8,2.52-19.33a5.12,5.12,0,0,1-.62-6.93,4.45,4.45,0,0,1,6.53-.65c13.77,12.07,4.51,25.08-1,32.85-1.8,2.52-5.14,7.22-4.74,8.52,0,0,.62,1.57,6,3.28a5,5,0,0,1,3.12,6.13,4.69,4.69,0,0,1-4.45,3.51" transform="translate(-1.5 -162.47)"/><path d="M128,362.58a4.49,4.49,0,0,1-1.34-.2c-4.38-1.4-10.4-3.92-12.17-9.66-1.91-6.19,2.19-12,6.15-17.52,6.7-9.42,8.81-13.81,2.51-19.33a5.14,5.14,0,0,1-.62-6.93,4.47,4.47,0,0,1,6.54-.66c13.76,12.08,4.51,25.08-1,32.85-1.8,2.53-5.14,7.23-4.74,8.53,0,0,.62,1.56,6,3.28a5,5,0,0,1,3.11,6.13,4.67,4.67,0,0,1-4.44,3.51" transform="translate(-1.5 -162.47)"/><path d="M163.86,362.58a4.49,4.49,0,0,1-1.34-.2c-4.37-1.4-10.4-3.92-12.17-9.66-1.91-6.19,2.19-12,6.15-17.52,6.7-9.42,8.81-13.81,2.51-19.33a5.14,5.14,0,0,1-.62-6.93,4.47,4.47,0,0,1,6.54-.66c13.77,12.08,4.51,25.08-1,32.86-1.8,2.52-5.14,7.22-4.74,8.52,0,0,.62,1.56,6,3.28a5,5,0,0,1,3.11,6.13,4.67,4.67,0,0,1-4.44,3.51" transform="translate(-1.5 -162.47)"/><path class="cls-2" d="M4,496.4H373a159.93,159.93,0,0,0-18.15-241.21,102.18,102.18,0,0,0-189.83-1.72" transform="translate(-1.5 -162.47)"/><path class="cls-3" d="M407.93,437.67c46.37,6.05,76.34-26.72,83.43-74A86.81,86.81,0,0,0,371,271.19" transform="translate(-1.5 -162.47)"/><path class="cls-3" d="M259.62,190a102.06,102.06,0,0,1,32.58,5.32c.06-.74.1-1.49.1-2.25a28.08,28.08,0,0,0-56.15-.36A102.48,102.48,0,0,1,259.62,190Z" transform="translate(-1.5 -162.47)"/><polyline class="cls-2" points="316.25 92.01 92.71 92.01 157.46 136.47"/></svg>For comparison this is a working file:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}</style></defs><title>pillow</title><path class="cls-1" d="M80.79,157.24c-14.57,0-26.87-11.51-27.09-26.08a26.51,26.51,0,0,1,29.71-26.73C96.79,106,106.7,117.7,106.7,131.17v.06c46.52-4.78,93-11.59,139.81-12.21,39-.52,77.74,5.12,116.45,9.1l30.34,3.11v-.06c0-13.47,9.91-25.16,23.29-26.74A26.52,26.52,0,0,1,446.12,134c-1.58,13.38-13.27,23.28-26.74,23.28h-.07l7.4,46.58a295,295,0,0,1,0,92.36l-7.4,46.58h.07c13.47,0,25.16,9.9,26.74,23.28a26.52,26.52,0,0,1-29.53,29.53C403.21,394,393.3,382.3,393.3,368.83v-.06c0,1-61.53,6.78-67.49,7.39-23.37,2.4-46.81,4.34-70.31,4.75-38.9.67-77.48-4.82-116.1-8.78l-32.64-3.36a.05.05,0,0,0-.06.06c0,13.47-9.91,25.16-23.29,26.74A26.52,26.52,0,0,1,53.88,366c1.58-13.38,13.27-23.28,26.74-23.28h.07l-7.27-46.57a294.23,294.23,0,0,1,.24-92.34l7.52-46.61Zm34.74,25.52s-17.67,29.45-17.67,65.77,17.67,65.76,17.67,65.76,17.67-29.44,17.67-65.76S115.53,182.76,115.53,182.76Z"/></svg>Otherwise I’m stumped – any other ideas why the old show and the new don’t?
Any help appreciated, Thank you 🙂
3
Answers
I use SVG Sanitizer Test to clean the SVG and it looks good
Based on my own experience with this same issue just now, and given that you already have SVG files working on your site.
First check if the SVG files are working ok – for example, if you double-click on the file in your file explorer / Windows explorer, do they open ok? Or can you preview them another way? If so, then the files are not the problem.
The fix that worked for me with SVGs not showing may work for you – I needed to set the permissions on the individual SVG files that I uploaded, as they were returning an error (a 403 Forbidden error, which was because permissions weren’t sufficient for web users to see them).
If you use a FTP tool, or else your web host’s file manager tool, you need to set the permissions to provide
readaccess to the newly uploaded files (which equates to644on Linux).HTH. And no, I don’t believe your question was off-topic.
I had a similar issue with an SVG file returning 404. In the end, it was a permission issue, although it was showing 664, I set it to 664 once more and the 404 error was gone.
Unfortunately, I can’t explain why the permission was ignored.