Create independent SVG files using Meteor and iron-router

Question

Create independent SVG files using Meteor and iron-router

My goal is to use Meteor and Iron-Router to serve dynamic SVG files with templating capabilities.

To start, I create a new route:

@route 'svg', {
   path: '/svg/:name'
   data: -> { name: this.params.name } # sample data
   layoutTemplate: 'svg'
}

Next, I set up a template:

<template name="svg">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns:cc="http://creativecommons.org/ns#"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="500"
      height="500"
      id="svg2">
  <defs
        id="defs4" />
  <metadata
        id="metadata7">
    <rdf:RDF>
      <cc:Work
            rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
              rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
        transform="translate(0,-552.36218)"
        id="layer1">
    <text
     x="55.067966"
     y="838.08844"
     id="text2985"
     xml:space="preserve"
     style="font-size:108.92150116px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Source Sans Pro;-inkscape-font-specification:Source Sans Pro"><tspan
       x="55.067966"
       y="838.08844"
       id="tspan2987">{{name}}</tspan></text>
    </g>
  </svg>
</template>

When I navigate to http://localhost:3000/svg/foobar, I encounter the following error (in the browser):

Your app is crashing. Here's the latest log.

=> Errors prevented startup:

While building the application:
client/infrastructureViews/svg.html:2: Expected tag name after `<`
<?xml version="1.0" e...
 ^

=> Your application has errors. Waiting for file change.

Question: How can I instruct Meteor or Iron-Router not to generate the surrounding <html>... structure and recognize the SVG as a spacebars top-level element?

javascript svg meteor iron-router spacebars

Answer 1

Answer №1

If you're looking to control how IR functions, unfortunately, that's not possible. However, you do have the option to switch to manual mode and create the response yourself.

To start, inform the router that a specific path will be handled on the server side:

this.route('svg', {
  path: '/svg/:name',
  where: 'server'
});

Next, set up a middleware on the server side to handle your response:

WebApp.connectHandlers.stack.splice(0, 0, {
  route: '/svg',
  handle: function(req, res, next) {
    var name = req.url.split('/')[1];    // Extract the parameter
    new Fiber(function () {              // Using Fiber is optional,
                                         // unless interaction with Mongo is required
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.write('Sample output');
      res.end();
    }).run()
  },
});

Note that you won't have access to the templating engine on the server side. To work around this, store your svg file in the /private directory, retrieve it as a text asset, and use underscore template format (e.g., <%= name %> instead of {{name}}) to populate it with data:

var template = Assets.getText('file.svg');
var output = _.template(template, {
  name: 'name',
});

Answer 2

If you're looking to control how IR functions, unfortunately, that's not possible. However, you do have the option to switch to manual mode and create the response yourself.

To start, inform the router that a specific path will be handled on the server side:

this.route('svg', {
  path: '/svg/:name',
  where: 'server'
});

Next, set up a middleware on the server side to handle your response:

WebApp.connectHandlers.stack.splice(0, 0, {
  route: '/svg',
  handle: function(req, res, next) {
    var name = req.url.split('/')[1];    // Extract the parameter
    new Fiber(function () {              // Using Fiber is optional,
                                         // unless interaction with Mongo is required
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.write('Sample output');
      res.end();
    }).run()
  },
});

Note that you won't have access to the templating engine on the server side. To work around this, store your svg file in the /private directory, retrieve it as a text asset, and use underscore template format (e.g., <%= name %> instead of {{name}}) to populate it with data:

var template = Assets.getText('file.svg');
var output = _.template(template, {
  name: 'name',
});

Answer 3

Answer №2

After reading through @HubertOG's response and carefully reviewing the documentation for IronRouter, I have devised a new approach that solely utilizes IronRouter. This method involves incorporating both the where and action options:

Router.map ->
  @route 'svg',
    path: '/svg/:name'
    where: 'server'
    action: ->
      svgTemplate = Assets.getText('svg/drawing.svg')
      svg = _.template(svgTemplate, { name: @params.name })
      @response.writeHead(200, {'Content-Type': 'image/svg+xml'})
      @response.end(svg)

It is important to note that the corresponding SVG file must be stored within a subdirectory of /private, as using ../ does not appear to function in this scenario.

Answer 4

After reading through @HubertOG's response and carefully reviewing the documentation for IronRouter, I have devised a new approach that solely utilizes IronRouter. This method involves incorporating both the where and action options:

Router.map ->
  @route 'svg',
    path: '/svg/:name'
    where: 'server'
    action: ->
      svgTemplate = Assets.getText('svg/drawing.svg')
      svg = _.template(svgTemplate, { name: @params.name })
      @response.writeHead(200, {'Content-Type': 'image/svg+xml'})
      @response.end(svg)

It is important to note that the corresponding SVG file must be stored within a subdirectory of /private, as using ../ does not appear to function in this scenario.

Create independent SVG files using Meteor and iron-router

Answer №1

Answer №2

Similar questions

Efficiently organizing items within a list on Ionic

Javascript downloadable content available for download

Real-time Data Stream and Navigation Bar Location

Setting multiple cookies with the setHeader method in NodeJs is a powerful capability that allows developers

Ways to display and conceal menu depending on initial view and scrolling

Vue.js Enhances CoolLightBox with Multiple Galleries

Exploring the FunctionDirective in Vue3

Sizing labels for responsive bar charts with chart.js

Is it possible to set a read-only attribute using getElementByName method

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

The element is being offset by SVG animation that incorporates transform properties

find the repeated sequences of characters within the text

Error encountered: JSHint is flagging issues with setting a background gradient using

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

Struggling to incorporate pagination with axios in my code

Generating and Importing Graphics through Iterations in Javascript

What causes Three.js OBJ conversion to render as mesh successfully but log as undefined?

Tips for creating a new route within a separate component in React JS without causing the previous one to unmount

Generating a dynamic sitemap with Next.js

Executing a npm script (script.js) with custom arguments - a step-by-step guide