I've run into a wall trying to render a SVG image markup code into html from a plain text field.

I'm looking to render the SVG code from a plain text field without overriding the plain text field rendering everywhere else.

plain text format currently converts all HTML tags and <> to &lt; &gt;.

I created a field template and tried both outputting the field content as

{{ item.content.context.value }}


{{ item.content|raw }}

both render the value as string wrapping every line with "quotation marks" and converting line-breaks into <br/> tags.

I previously had the field type formatted text, but that also wrapped everything in <pre> tags, even when all tags were allowed. I'd really like to get it working with plain text.

Example of the svg-code the field has to hold in text form:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 290 290" enable-background="new 0 0 290 290" xml:space="preserve">
        <path fill="none" stroke="#78C681" stroke-width="3" stroke-miterlimit="10" d="M261.1,273.1H28.9c-6.6,0-12-5.4-12-12V28.9
        <circle fill="none" stroke="#1B435D" stroke-width="2" stroke-miterlimit="10" cx="145.2" cy="166.9" r="62.7"/>
        <line fill="none" stroke="#78C681" stroke-width="3" stroke-miterlimit="10" x1="16.9" y1="60.8" x2="273.1" y2="60.8"/>
        <circle fill="none" stroke="#1B435D" stroke-width="2" stroke-miterlimit="10" cx="178.3" cy="152.3" r="6.8"/>
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M115.1,167.9
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M151.9,216.9
  • Out of the box plain text has a filter that escapes markup. |raw doesn't unescape already escaped markup. The escaping is happening earlier than Twig's auto escape.
    – star-szr
    Commented Dec 27, 2015 at 17:36

3 Answers 3


A solution by iworkyon from the Drupal community:

field--node--[field name].html.twig:

{% if svg %}
  <div class="my-svg">
    {{ svg|raw }}
{% endif %}


* Implements hook_preprocess_field().
function MYTHEME_preprocess_field(&$variables, $hook) {
    switch ($variables['element']['#field_name']) {
      case 'field_svg_test':
        $variables['svg'] = $variables['items'][0]['content']['#context']['value'];
  • Hehe, looks like my "I'm at work" IRC nickname snuck in here :D Fun discovery while googling!
    – ividyon
    Commented Mar 15, 2017 at 16:10
  • Hope you don't mind :) It helped me, so I thought I'd share. Commented Mar 28, 2017 at 8:20

This worked for me:

{{ item.content['#context'].value|raw }}

Did you try to apply the raw filter on the value?

{{ item.content.context.value|raw }}

But this is not secure. To output files, you can use a file field. This has the correct field formatters to generate the link. If you are not able to configure the link in the ui to your needs, you can modify the twig or preprocess for this specific field.

  • 2
    raw is being/has been removed: drupal.org/node/2603074
    – Clive
    Commented Dec 17, 2015 at 11:14
  • 4k4: The field is a plain text field and not a file. The field value will be the copied markup of an svg image. I tried your solution, but nothing is different, still get the quotation marks wrapping and linebreaks issue. Also now I'm worried about using |raw after what Clive said and am even further from reaching a solution. Commented Dec 17, 2015 at 11:47
  • You are even further from reaching a solution, because you try to trick the auto escaping und drupal tries everything to discourage you from doing this. Better use the mechanism that are there to provide file links as described in my answer. And then use the appropriate twig templates down the line to change the rendering.
    – 4uk4
    Commented Dec 17, 2015 at 12:04
  • 4k4: I'm a bit confused now, as the content the field has to hold is not a file. it's in the form of text/svg-code. I updated the question with an example. Commented Dec 17, 2015 at 12:18
  • Plain text will not be able to output this svg code. Did you try the text format "Full Html", if this can process the svg-code? If not, you better put the svg in its own svg-file.
    – 4uk4
    Commented Dec 17, 2015 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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