How can I render plain text as HTML in a template?

Question

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 < >.

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

{{ item.content.context.value }}

and

{{ 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">
    <g>
        <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
            c0-6.6,5.4-12,12-12h232.1c6.6,0,12,5.4,12,12v232.1C273.1,267.7,267.7,273.1,261.1,273.1z"/>
        <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
            c8.8,0,22.3,3.2,28.4,4.7"/>
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M151.9,216.9
            c0,0,17.2-1.5,29.6-14.8"/>
    </g>
</svg>

Answer 1

A solution by iworkyon from the Drupal community:

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

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

MYTHEME.theme:

/**
* 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'];
        break;
    }
}

Answer 2

This worked for me:

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

Answer 3

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.