Include SVG xml in Jade template

Question

Is it possible to create a Jade mixin, which reads a file from the file system, and echoes it into the rendered HTML?

I tried this...

mixin svg(file)
            


        

Answer 1

I have better luck with object, such as

  a.svg(href='/')
    object(type="image/svg+xml" data="/img/#{data.menu.img}.svg")
      | #{data.menu.title}

Answer 2

I guess there are two ways to achieve this. Latter one just shows the straight way in case not using mixins is acceptable for you. The first solution wraps up your approach:

A: Pass variable require or fs to your jade template

Make sure that the needed functions are available (scoped) during jade template parsing. Assuming you're using express this might look like this:

app.get('/', function(req,res) {
  res.render('portfolio.jade', {
    title: 'svg with jade test',
    fs: require('fs')
  })
});

Now your mixin should work with two minor modifications:

mixin svg(file)
  - var xml = fs.readFileSync(file)
  div!= xml

You can even just pass { require: 'require' } as a local to the jade template and use your original mixin code. Note that in any case you have to suppress escaping the output with != in order to transfer SVG markup so that it is interpreted and rendered instead of being displayed as (HTML) text. Also be aware that fs lives in your app/controller code and paths must be expressed relative to it, e.g.:

mixin('public/images/my-logo.svg')

B: Or just use include (without mixins)

Jade is capable of including other type of contents, so a simple

div
  include images/my-logo.svg

does this job as well. Unfortunately this doesn't work dynamically, so you cannot include files using passed variables within mixins. But: As long as you're not planning to enrich your mixin with additional logic, this solution doesn't even produce (way) more code.

Answer 3

Above answers do work but if you want to do an SVG inline. You can do it like this.

//- Cover.
.ywp_title
    h1
        | Some text
        span
            | More Span Text
            svg.bg_svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430 100" style="enable-background:new 0 0 430 100;" xml:space="preserve")
                g(style="fill: #BADA55;")
                    path(style="fill: pink;" class="public-spaces-bg-fill" d="M356.2,60.1C356.2,60.1,356.2,60.1,356.2,60.1c0.1,0,0.1,0,0.2,0C356.3,60.1,356.3,60.1,356.2,60.1 M424.4,73.2c0-2.8-2-6.1-3.2-9.8c-2-5.8-4-11.7-6.3-17.5c-0.1-0.2-0.1-0.3-0.2-0.5c0,0,0,0,0,0v0c-0.7-1.4-1.8-2.4-3.4-3.1 c-12-5.5-26.3-7.4-40.3-8.6c18,0.1,36,0.4,54,0.6c-0.6,0-4.5-13.4-4.9-14.3c-0.4-1-4.1-14.2-5.2-14.2C380.4,5.4,345.8,5,311.3,5.1 c-66.5,0.2-133.3,1.8-199.3,9.8c-20.8,2.5-41.7,5.4-62.2,9.6c-2.1,0.4-4.2,0.9-6.4,1.3l-17.7,4.4c-1.1,0.3-2.3,0.7-3.4,1.1 c-5.1,1.7-12.1,3.6-15.7,7.8c-1.2,1.4-1.7,2.8-1.2,4.6c0.3,1,0.7,2,1,3.1C13,71.7,18.1,75.5,20.1,76.6c7.7,4.1,16.4,6,25,7.5 c43.4,7.7,88,9.4,132.1,10.3c44.7,0.9,89.5,0.2,134.1-1.8c21.6-1,43.2-2.3,64.6-5c14.1-1.8,31.6-2.6,44.6-9.1 C423.3,76.9,424.4,75.2,424.4,73.2c0,0.1,0.1,0.2,0.1,0.2C424.5,73.4,424.4,73.3,424.4,73.2")
        | and more text.