All Projects β†’ elrumordelaluz β†’ Svgson

elrumordelaluz / Svgson

Licence: mit
Transform svg files to json notation

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Svgson

Svgeez
A Ruby gem for automatically generating an SVG sprite from a folder of SVG icons.
Stars: ✭ 69 (-74.54%)
Mutual labels:  svgo, svg, svg-icons
Svg Autocrop
πŸš—πŸŒ½πŸ”³An NPM module to autocrop and slim down SVGs
Stars: ✭ 80 (-70.48%)
Mutual labels:  svgo, svg, svg-icons
Circle Flags
A collection of 300+ minimal circular SVG country flags
Stars: ✭ 139 (-48.71%)
Mutual labels:  svgo, svg, svg-icons
Svgo
βš™οΈ Node.js tool for optimizing SVG files
Stars: ✭ 17,050 (+6191.51%)
Mutual labels:  svgo, svg
React Kawaii
Cute SVG React Components
Stars: ✭ 2,709 (+899.63%)
Mutual labels:  svg, svg-icons
Svg Credit Card Payment Icons
SVG Credit Card & Payment Icons: 6 Styles, 80 Icons
Stars: ✭ 227 (-16.24%)
Mutual labels:  svg, svg-icons
Weather Underground Icons
Weather Underground Icons ( PNG & SVG )
Stars: ✭ 186 (-31.37%)
Mutual labels:  svg, svg-icons
Atom Svgo
Minify SVG with SVGO.
Stars: ✭ 12 (-95.57%)
Mutual labels:  svgo, svg
React Svg Loader
A loader for webpack, rollup, babel that loads svg as a React Component
Stars: ✭ 570 (+110.33%)
Mutual labels:  svgo, svg
Svgr
Transform SVGs into React components 🦁
Stars: ✭ 8,263 (+2949.08%)
Mutual labels:  svgo, svg
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-61.25%)
Mutual labels:  svgo, svg
Small N Flat
svg icons on a 24px grid
Stars: ✭ 205 (-24.35%)
Mutual labels:  svg, svg-icons
Vue Eva Icons
Is a pack of more than 480 beautiful open source Eva icons as Vue components
Stars: ✭ 189 (-30.26%)
Mutual labels:  svg, svg-icons
Vectorlogozone
3,000+ gorgeous SVG logos, perfect for your README or credits page
Stars: ✭ 239 (-11.81%)
Mutual labels:  svg, svg-icons
Supertinyicons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
Stars: ✭ 13,177 (+4762.36%)
Mutual labels:  svg, svg-icons
Svgicon
SVG icon components and tool set
Stars: ✭ 817 (+201.48%)
Mutual labels:  svgo, svg
Feathericon
simply generic vector icon collection - including sketch file, svg files, and font files.
Stars: ✭ 178 (-34.32%)
Mutual labels:  svg, svg-icons
Akar Icons
A perfectly rounded icon library made for designers, developers, and pretty much everyone.
Stars: ✭ 184 (-32.1%)
Mutual labels:  svg, svg-icons
Omatsuri
PWA with 12 open source frontend focused tools
Stars: ✭ 1,131 (+317.34%)
Mutual labels:  svgo, svg
Svg Sprite
SVG sprites & stacks galore β€” A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)
Stars: ✭ 1,648 (+508.12%)
Mutual labels:  svgo, svg

svgson

Simple tool to transform svg files and Strings into Object or JSON.

Useful to manipulate SVG with js, to store in noSQL databses.


Travis Codecov Version Download MIT License

v2 docs

Install

yarn add svgson

Usage

const { parse, stringify } = require('svgson')

// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
parse(`
  <svg>
    <line
      stroke= "#bada55"
      stroke-width= "2"
      stroke-linecap= "round"
      x1= "70"
      y1= "80"
      x2= "250"
      y2= "150">
    </line>
  </svg>`).then(json => {
  console.log(JSON.stringify(json, null, 2))
  /*
    {
      name: 'svg',
      type: 'element',
      value: '',
      attributes: {},
      children: [
        {
          name: 'line',
          type: 'element',
          value: '',
          attributes: {
            stroke: '#bada55',
            'stroke-width': '2',
            'stroke-linecap': 'round',
            x1: '70',
            y1: '80',
            x2: '250',
            y2: '150'
          },
          children: []
        }
      ]
    }
  */

  // -------------------------------
  // Convert JSON AST back to SVG
  // -------------------------------
  const mysvg = stringify(json)
  /* returns the SVG as string */
})

umd usage

const svgson = require('svgson')
svgson
  .parse(
    `<svg>
      <line
        stroke= "#bada55"
        stroke-width= "2"
        stroke-linecap= "round"
        x1= "70"
        y1= "80"
        x2= "250"
        y2= "150">
      </line>
    </svg>`
  )
  .then(function(json) {
    console.log(JSON.stringify(json, null, 2)
  )
 
mysvg = svgson.stringify(json)
  

Test in browser here

API

svgson.parse

svgson.parse(input[, options])

Returns: Promise

  • input

    Type: String

  • options.transformNode

    Function to apply on each node when parsing, useful when need to reshape nodes or set default attributes.

    Type: Function that returns the node

    Default:

    function(node){
      return node
    }
    
  • options.compat

    Use keys from previuos version of svgson

    Type: Boolean

    Default: false

  • options.camelcase

    Apply camelCase into attributes

    Type: Boolean

    Default: false

svgson.parseSync

Added in 3.1.0

svgson.parseSync(input[, options])

This function is a synchronous version of svgson.parse. The arguments are the same, but unlike svgson.parse, the return value is not wrapped in a Promise.

Returns: Object [Object]

svgson.stringify

svg = svgson.stringify(ast[, options])

Returns: String

  • ast

    svgson parsed result.

    Type: Object [Object]

  • options.transformAttr

    Function to apply on each attribute when stringifying.

    Type: Function that returns the key/attribute string with the ability to use the escape function on it.

    Default:

    function(key, value, escape) {
      return `${key}="${escape(value)}"`
    }
    
  • options.selfClose

    Type: Boolean

    Default: true

  • Pretty Printing

    In order to generate pretty formatted SVG output, use pretty npm module:

    pretty = require('pretty')
    formatted = pretty(svg)
    

Related

svgson-cli Transform SVG into Object from the Command Line

element-to-path Convert SVG element into path

path-that-svg Convert entire SVG with path

svg-path-tools Tools to manipulate SVG path (d)

License

MIT Β© Lionel T

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].