​ I added the following code for a "Global: Custom Text" field of a Views :

<div class="messages-list__item messages messages--warning" data-drupal-selector="messages" role="contentinfo" aria-label="Warning message" data-once="messages">
    <div class="messages__container" data-drupal-selector="messages-container">
        <div class="messages__header">
            <h2 class="visually-hidden">Warning message</h2>
            <div class="messages__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32"><path d="M16,0C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16c8.8,0,16-7.2,16-16C32,7.2,24.8,0,16,0z M18.7,26c0,0.4-0.3,0.7-0.6,0.7h-4c-0.4,0-0.7-0.3-0.7-0.7v-4c0-0.4,0.3-0.7,0.7-0.7h4c0.4,0,0.6,0.3,0.6,0.7V26z M18.6,18.8c0,0.3-0.3,0.5-0.7,0.5h-3.9c-0.4,0-0.7-0.2-0.7-0.5L13,5.9c0-0.1,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.5-0.2h4.6c0.2,0,0.4,0.1,0.5,0.2C18.9,5.6,19,5.7,19,5.9L18.6,18.8z"></path></svg>
        <div class="messages__content">
            <ul class="messages__list">
                {{ field_warning_affiliation }}
                {{ field_warning_investment }}

My problem is that the SVG code is not displayed :


How to display an SVG code in a Views ?

  • @PatrickKenny It is not possible to modify the text format of the global field ibb.co/BnYVzCD
    – FrYN
    Nov 1 '21 at 16:43
  • My mistake. As a workaround, you can probably save the SVG as a file and link to it as an image. Nov 1 '21 at 16:50
  • @Patrick Kenny yes it is possible but I find it cleaner with the code directly
    – FrYN
    Nov 1 '21 at 17:31
  • Sure. Another way to do this in code is to add a theme template for the view. The downside of this approach is that it won't be editable in the Views admin UI. Nov 1 '21 at 17:43
  • Too bad Drupal does not support SVG in its interface. It complicates things
    – FrYN
    Nov 1 '21 at 17:46

You can use CSS to add your SVG, or if you want it inline you can also add it inside a twig template (like this: views-view-field--yourviewid--nothing.html.twig). Then add something like this wherever you want it in the file:

{{ include('@youtheme/images/picto.svg') }}

Within your yourtheme.info.yml, add this:

      - .

Enable the components module.


{{ include(directory ~ '/images/picto.svg') }}


{{ source(directory ~ '/images/picto.svg') }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.