Wondering if any Tech gurus can assist! One of my clients has opened a second ‘operation’ and wants a second website very much based on their existing Rapidweaver site but with content modified to fit the new business.
So I duplicated the original site and started content modifications but all of a sudden I’m getting an error on one page:
Parse error: Syntax Error, unexpected ‘version’ (T-String)
(in Library/Containers/com.realmacsoftware.rapidweaver…)
After some digging I realised the ‘unexpected version’ is that listed in an SVG image I use in a few places. Remove the SVG and problem disappears.
However, the original site with the same SVG shows no such errors.
Anyone explain what might be going on? The SVG rogue code appears to be at the beginning: <?xml version=“1.0”. If I remove the “?” all is fine.
But if that doesn’t work I had similar issues when reusing the same SVG file on the same page. I think Tav provided the solution - duplicate SVG IDs can be a problem but easily resolved.
I can’t find the original thread. So here is a reasonable Google AI response…
When encountering errors using the same SVG code multiple times on a web page, the most common issue stems from duplicate IDs. SVG elements, especially those within <defs> or used for referencing with <use>, rely on unique IDs for proper functionality. If you copy and paste the same SVG code, you’ll end up with multiple elements sharing the same ID, which can lead to unexpected behavior and rendering problems.
Here are potential solutions and common issues:
Duplicate IDs:
Problem:
If your SVG contains elements with id attributes (e.g., for gradients, masks, or reusable shapes within <defs>), and you duplicate the entire SVG code, these IDs will no longer be unique on the page. This can cause one SVG to reference the definitions of another, leading to incorrect rendering or hidden elements.
Solution:
Dynamically generate unique IDs: If you’re using a templating engine or JavaScript, you can dynamically append a unique identifier (e.g., a timestamp or a random string) to each ID when the SVG is rendered.
Use SVG Sprites with <use>: For reusing icons or common graphics, create an SVG sprite containing all your icons within <symbol> elements, each with a unique ID. Then, use the <use> element to reference these symbols by their ID. This approach ensures ID uniqueness and improves performance.
Modify IDs manually: If you have a small number of duplicated SVGs, you can manually go through and change the IDs within each instance to be unique.
I must add that Tav put the solution much more succinctly, lovingly prefaced by “you twat”.
