Issue with SVG <symbol> and VPI (Viewport Images) option in LiteSpeed Cache v7.3

Status
Not open for further replies.
A

Alain Y.

New Member
#1
#1
Dear LiteSpeed Support Team,

I am writing to report an issue I've encountered with the LiteSpeed Cache plugin, specifically since updating to version 7.3 (or possibly an earlier recent version).
Problem Description: When the "Viewport Images" (VPI) option is enabled under LiteSpeed Cache > Page Optimization > Media Settings, it causes SVG <symbol> elements used for icons (generated by Oxygen Builder in my case) to break on the front-end for logged-out users. The icons display correctly when logged into WordPress admin, but fail to render for visitors.
Technical Details: Upon inspection, I've found that with the VPI option enabled, LiteSpeed Cache injects invalid <link> tags directly inside the SVG <symbol> elements. This breaks the SVG structure and prevents the icon from displaying.
Expected HTML (when icons display correctly - status 200, typically when logged in or LiteSpeed is disabled):
HTML

HTML: 
<symbol id="FontAwesomeicon-calendar" viewBox="0 0 26 28">
<title>calendar</title>
<path d="M2 26h4.5v-4.5h-4.5v4.5zM7.5 26h5v-4.5h-5v4.5zM2 20.5h4.5v-5h-4.5v5zM7.5 20.5h5v-5h-5v5zM2 14.5h4.5v-4.5h-4.5v4.5zM13.5 26h5v-4.5h-5v4.5zM7.5 14.5h5v-4.5h-5v4.5zM19.5 26h4.5v-4.5h-4.5v4.5zM13.5 20.5h5v-5h-5v5zM8 7v-4.5c0-0.266-0.234-0.5-0.5-0.5h-1c-0.266 0-0.5 0.234-0.5 0.5v4.5c0 0.266 0.234 0.5 0.5 0.5h1c0.266 0 0.5-0.234 0.5-0.5zM19.5 20.5h4.5v-5h-4.5v5zM13.5 14.5h5v-4.5h-5v4.5zM19.5 14.5h4.5v-4.5h-4.5v4.5zM20 7v-4.5c0-0.266-0.234-0.5-0.5-0.5h-1c0-0.266-0.5 0.234-0.5 0.5v4.5c0 0.266 0.234 0.5 0.5 0.5h1c0.266 0 0.5-0.234 0.5-0.5zM26 6v20c0 1.094-0.906 2-2 2h-22c-1.094 0-2-0.906-2-2v-20c0-1.094 0.906-2 2-2h2v-1.5c0-1.375 1.125-2.5 2.5-2.5h1c1.375 0 2.5 1.125 2.5 2.5v1.5h6v-1.5c0-1.375 1.125-2.5 2.5-2.5h1c1.375 0 2.5 1.125 2.5 2.5v1.5h2c1.094 0 2 0.906 2 2z"></path>
</symbol>

Actual HTML (when VPI is enabled, leading to broken icons):
HTML

HTML: 
<symbol id="FontAwesomeicon-calendar" viewBox="0 0 26 28">
<title>calendar</title>
<link data-optimized="2" rel="stylesheet" href="https://inspiir.fr/wp-content/litespeed/css/f6ebab4616823c631bcbd200cba67eca.css?ver=17705"></link>
<link rel="preload" as="image" href="https://inspiir.fr/wp-content/uploads/2023/07/cours-de-meditation-en-groupe-inspiir.jpg">
<path d="M2 26h4.5v-4.5h-4.5v4.5zM7.5 26h5v-4.5h-5v4.5zM2 20.5h4.5v-5h-4.5v5zM7.5 20.5h5v-5h-5v5zM2 14.5h4.5v-4.5h-4.5v4.5zM13.5 26h5v-4.5h-5v4.5zM7.5 14.5h5v-4.5h-5v4.5zM19.5 26h4.5v-4.5h-4.5v4.5zM13.5 20.5h5v-5h-5v5zM8 7v-4.5c0-0.266-0.234-0.5-0.5-0.5h-1c-0.266 0-0.5 0.234-0.5 0.5v4.5c0 0.266 0.234 0.5 0.5 0.5h1c0-0.266 0.5-0.234 0.5-0.5zM19.5 20.5h4.5v-5h-4.5v5zM13.5 14.5h5v-4.5h-5v4.5zM19.5 14.5h4.5v-4.5h-4.5v4.5zM20 7v-4.5c0-0.266-0.234-0.5-0.5-0.5h-1c0-0.266-0.5 0.234-0.5 0.5v4.5c0 0.266 0.234 0.5 0.5 0.5h1c0-0.266 0.5-0.234 0.5-0.5zM26 6v20c0 1.094-0.906 2-2 2h-22c-1.094 0-2-0.906-2-2v-20c0-1.094 0.906-2 2-2h2v-1.5c0-1.375 1.125-2.5 2.5-2.5h1c1.375 0 2.5 1.125 2.5 2.5v1.5h6v-1.5c0-1.375 1.125-2.5 2.5-2.5h1c1.375 0 2.5 1.125 2.5 2.5v1.5h2c1.094 0 2 0.906 2 2z"></path>
</symbol>

As you can see, the <link> tags are incorrectly placed inside the <symbol> element, which is not valid HTML for SVG.

Environment:
  • WordPress Version: 6.8.2
  • LiteSpeed Cache Version: 7.3
  • Theme/Builder: Oxygen Builder 4.9.1
  • PHP Version: 8.2.27
  • Web Server: LiteSpeed

  • This issue forces me to keep the VPI option disabled, which affects performance. I kindly request your assistance in investigating and resolving this bug.
Thank you for your time and support.
Sincerely,

Alain
 
A

Alain Y.

New Member
#3
#3
Hi and thank you for your message. Oxygen Builder generates this code automatically when you use their Icon element. It was working perfectly. Now it broke all my websites design. Something has changed? What can I do to arrange?

Thank you very much for your help
 
Status
Not open for further replies.
Top