All Projects → convertSvg → convertPath

convertSvg / convertPath

Licence: other
A node lib to convert svg shape elements into path svg elements.

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to convertPath

jquery-svg-convert
Convert .svg images to code on the fly with jQuery
Stars: ✭ 30 (-68.09%)
Mutual labels:  svg-icons, svg-path
WP-SVG-Icons-WordPress-Plugin
WPIcons Plugin (Formally WP SVG Icons) - Quickly and easily install font icons and custom SVG icons on any WordPress site.
Stars: ✭ 18 (-80.85%)
Mutual labels:  svg-icons
react-crud-icons
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.
Stars: ✭ 19 (-79.79%)
Mutual labels:  svg-icons
react-loading-icons
A TypeScript-React edition of Sam Herbert's amazing SVG Loaders.
Stars: ✭ 32 (-65.96%)
Mutual labels:  svg-icons
Thomas-George-T
Readme for Github Profile. Don't just fork it, Star it too ⭐!
Stars: ✭ 31 (-67.02%)
Mutual labels:  svg-icons
SVGImage
A SVGImage Control for WPF
Stars: ✭ 132 (+40.43%)
Mutual labels:  svg-icons
rails-heroicon
Ruby on Rails views helpers for the awesome heroicons by Steve Schoger.
Stars: ✭ 23 (-75.53%)
Mutual labels:  svg-icons
phosphor-figma
A flexible icon family for Figma
Stars: ✭ 17 (-81.91%)
Mutual labels:  svg-icons
SketchSVG
Have icons in a Sketch file but don't want to manually extract and compress them as SVGs? Let our SketchSVG tool do it!
Stars: ✭ 23 (-75.53%)
Mutual labels:  svg-icons
ionicons-sprite
SVG sprite icon set based on Ionicons icons
Stars: ✭ 22 (-76.6%)
Mutual labels:  svg-icons
castor-icons
Collection of icons for Castor published as SVGs and React components
Stars: ✭ 12 (-87.23%)
Mutual labels:  svg-icons
majesticons
A versatile, beautiful, and scalable iconset. 760 icons each in line and solid style.
Stars: ✭ 98 (+4.26%)
Mutual labels:  svg-icons
path-that-svg
Path that SVG!
Stars: ✭ 45 (-52.13%)
Mutual labels:  svg-path
svg-gobbler
Open source browser extension that makes designing and developing easier by finding, processing, exporting, optimizing, and managing SVG content.
Stars: ✭ 272 (+189.36%)
Mutual labels:  svg-icons
mdn-dinocons
A scalable set of icons for use across Mozilla Developer websites
Stars: ✭ 21 (-77.66%)
Mutual labels:  svg-icons
crypto-icons
Cryptocurrency icons by Guarda
Stars: ✭ 54 (-42.55%)
Mutual labels:  svg-icons
oksvg
Partial implementation of SVG 2.0 specification in golang.
Stars: ✭ 112 (+19.15%)
Mutual labels:  svg-path
archer-svgs
异步加载svg解决方案
Stars: ✭ 23 (-75.53%)
Mutual labels:  svg-icons
vector-icons
Free Vector icons for Website and Mobile App
Stars: ✭ 28 (-70.21%)
Mutual labels:  svg-icons
svelte-simple-icons
📦 This package provides the Simple Icons packaged as a set of Svelte components.
Stars: ✭ 27 (-71.28%)
Mutual labels:  svg-icons

convertPath npm

A node lib to convert svg shape elements into path svg elements.

Install

npm install convertpath

What it can do

convertpath has a plugin-based architecture, so almost every optimization is a separate plugin.

Today we have:

Plugin Description
convertUseToGroup convert defs and symbol elements into group svg elements.
convertShapeToPath convert svg shape elements into path svg elements.
removeGroups move some group and move some group attributes to the contained elements
convertTransfromforPath remove transform attribute and convert path data to relative
removeGradient remove gradient if reference via url('#id')
viewBoxTransform remove width/height attributes and reset ViewBox

Usage

const SVGParser = require('convertpath')

const parse = SVGParser.parse('./test/test.svg', {
  plugins: [
    {
      convertUseToGroup: true, // at first
    },
    {
      convertShapeToPath: true,
    },
    {
      removeGroups: true,
    },
    {
      convertTransfromforPath: true,
    },
    {
      viewBoxTransform: true, // at last
    },
  ],
  size: 1000,
})

const result = parse.toSimpleSvg()
console.log(result)

const paths = parse.getPathAttributes()
console.log(paths)

/**
 * '<circle cx="500" cy="500" r="20" fill="red"/>'
 */
console.log(parse.toSimpleSvg())

/**
 * '<path d="M500,500,m-20,0,a20,20,0,1,0,40,0,a20,20,0,1,0,-40,0,Z" fill="red"/>'
 */

API

SVGParser.parse(filename)

SVGParser.parseStr(svgString)

SVGParser.parseNode(node)

parse.toSimpleSvg()

parse.getPathAttributes

WIKI

SVG WIKI

CHANGELOG

CHANGELOG.md

Special thanks

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].