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

Breaking auto-update functionality when using the 'dd-slick' jQuery plugin to style chained drop-downs

Retrieve the height of a div element in an AngularJS framework, and assign this value to a corresponding attribute of another element

In mongoose, documents are able to update autonomously without any explicit request

Retrieving object by a value within a nested array in Javascript

Nextjs compilation error - Unable to locate module: Cannot resolve 'module'

Error in AngularJS: The argument 'fn' is not a function and is undefined

Cross-Origin Resource Sharing (CORS) Issue: How Angular.JS, Node.JS, and

When configuring a domain for Express sessions, it prevents the cookie from being stored

Error message encountered: "Node.js Object [object Object] does not support the method"

Calculate the total of the temporary information entered into the input field

How can one authenticate an express session when sending a POST request?

How to troubleshoot missing API data in a Bootstrap 5 modal

How to extract various arrays of identical objects from a larger array in JavaScript

Directives for Nested Elements in AngularJS

What is the process for generating an alert box with protractor?

Unable to execute click events on JavaScript functions after updating innerHTML using PHP and Ajax

The alignment is off

Using Javascript to iterate through and increase HTML code with values all the way up to 55

Utilizing npm packages with grunt: A guide

Tips for sharing a variable with an external JavaScript file in ASP.NET