Question

0

297

Views

Create svg path using svg.js and opentype.js

Hi all I'm getting successfully grabbing svg path data using opentype.js but having trouble using that data with svg.js to render the path:

Below is my code which currently creates an svg with an empty group <g></g> where I was expecting the group to wrap my path data.

I read on another post that I should be using SVG.adopt() (as I have tried below) to no avail. Thanks in advance

const svg = new SVG().addTo('body').attr({
  viewBox: '0 0 100 100'
})

const createShape = (font,content) => {
  const fontPaths = font.getPaths(content,20,20,100)
  const paths = fontPaths.map(fontPath => {
    console.log(fontPath.toSVG())
    const path = SVG.adopt(fontPath.toSVG())
    // const svgPath = SVG(path)
    // // svgPath.fill('black')
    console.log(path)
    return path
  })
  const group = svg.group()
  group.add(paths).attr({
    fill: 'black'

  })
      return group
}

const draw = (font) => {
  createShape(font,'hello')
}

opentype.load('https://assets.codepen.io/1070/basiersquare-bold-webfont.woff',(err,font) => draw(font))

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T21:42:21.242Z

opentype.js method fontPath.toSVG() will return svg markup – not any nodes.
Whereas group.add(paths) expects the variable "paths" to conatain nodes for appending.

If you don't mind I'd suggest a plain js approach for svg generation.

Example: get glyph paths and append svg

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute('fill', 'black');
document.body.appendChild(svg);
svg.appendChild(g);

const createShape = (font, content) => {
  let pathMarkup = '';
  const fontPaths = font.getPaths(content, 0, 100, 100)
  const paths = fontPaths.map(fontPath => {
    let path = fontPath.toSVG();
    pathMarkup += path;
  })
  g.insertAdjacentHTML('beforeend', pathMarkup);
  //adjust viewBox
  let viewBox = svg.getBBox();
  svg.setAttribute('viewBox', [0, 0, (viewBox.width + viewBox.x).toFixed(2), (viewBox.height + viewBox.y).toFixed(2)].join(
    ' '));
}

const draw = (font) => {
  createShape(font, 'hello')
}

opentype.load('https://fonts.gstatic.com/s/firasans/v15/va9B4kDNxMZdWfMOD5VnZKveRhf8.woff', (err, font) => draw(font))

svg{
width: 50vw;
border: 1px solid #ccc
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>

The above example is basically

appending svg and group element to DOM
concatenating the path markup returned by opentype.js
inserting the markup to svg group
adjusting the svg viewBox to avoid overflows (using getBBox() to get appropriate width and height values)

Edit: svg.js approach

As @Fuzzyma pointed out – my answer might have been too biased.

const svg = new SVG().addTo('body');
const group = svg.group();
const createShape = (font,content) => {
    let pathString = '';
  const fontPaths = font.getPaths(content,0,100,100)
  const paths = fontPaths.map(fontPath => {
    let path = fontPath.toSVG();
    pathString += path;
    return pathString
  })
  group.svg(pathString).attr({
    fill: 'black'
  })
      return group
}

svg.attr({
  viewBox: '0 0 226.10 101.50'
})

const draw = (font) => {
  createShape(font,'hello')
}

opentype.load('https://assets.codepen.io/1070/basiersquare-bold-webfont.woff',(err,font) => draw(font))

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>

0

297

Create svg path using svg.js and opentype.js

1 answers

0

Example: get glyph paths and append svg

Edit: svg.js approach

Find remote jobs

Andres GPT