Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg tag doesn't render in v5 #10161

Closed
stefankempf opened this issue May 22, 2024 · 3 comments
Closed

svg tag doesn't render in v5 #10161

stefankempf opened this issue May 22, 2024 · 3 comments
Labels

Comments

@stefankempf
Copy link

stefankempf commented May 22, 2024

Bug description

I have a pretty basic svg tag setup

<button class="absolute right-3 top-3" aria-label="Störer schliessen" @click="showStoerer = false">
    {{ svg src="close" class="size-7 md:size-12 text-white" }}
</button>

while resources/svg/close.svg looks like that

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
  </svg>

in the frontend, the svg tag is not getting outputed, the button is empty.

Screenshot von 2024 05 22 um 12 16 51

  • adding sanitize="false" resolves the issue, {{ svg:close or {{ svg :src="close" does not
  • when removing the class attribute, the svg is getting shown as well

How to reproduce

follow above explained setup

Logs

No response

Environment

Environment
Laravel Version: 11.8.0
PHP Version: 8.3.7
Composer Version: 2.7.1
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Locales
Installed: de, de_CH, en
LaravelLang\Actions\Plugin: 1.8.3
LaravelLang\Attributes\Plugin: 2.10.5
LaravelLang\HttpStatuses\Plugin: 3.8.3
LaravelLang\Lang\Plugin: 15.4.1
Locales Version: 2.7.0
Protected: de_CH, en
Publisher Version: 16.3.0

Livewire
Livewire: v3.4.12

Statamic
Addons: 1
Sites: 1
Stache Watcher: Enabled
Static Caching: Disabled
Version: 5.4.0 PRO

Statamic Addons
jonassiewertsen/statamic-livewire: 3.3.1

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

@jasonvarga
Copy link
Member

You have a class on the svg itself, and a class on the svg tag. When it gets sanitized, it must be getting confused.

You can either delete the classes off the svg, or add sanitize="false" to the tag.

@RyanRoberts
Copy link

You have a class on the svg itself, and a class on the svg tag. When it gets sanitized, it must be getting confused.

You can either delete the classes off the svg, or add sanitize="false" to the tag.

It looks like we now have to use sanitize="false" to also add other attributes even if they're not in the svg file. For example I often include role="img" on svgs for accessibility reasons, that only works with sanitize="false" even though role isn't in the svg.

@jasonvarga
Copy link
Member

You can disable svg sanitization completely by adding \Statamic\Tags\Svg::disableSanitization(); to your AppServiceProvider's boot method.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants