# aframe-svgfile-component
> Svgfile component for A-Frame.
Latest version **1.1.2** (published 2017-06-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install aframe-svgfile-component
pnpm add aframe-svgfile-component
yarn add aframe-svgfile-component
bun add aframe-svgfile-component
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2017-06-16 |
| First published | 2017-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18 |
| Author | info@7dir.ru |
| Maintainers | 7dir |
| Keywords | aframe, aframe-component, aframe-vr, vr, mozvr, webvr, svgpath, svgfile, aframe-svgfile-component |
## Links
- npm: https://www.npmjs.com/package/aframe-svgfile-component
- Repository: https://github.com/7dir/aframe-svgfile-component
- Homepage: https://github.com/7dir/aframe-svgfile-component#readme
- Issues: https://github.com/7dir/aframe-svgfile-component/issues
- npm.io page: https://npm.io/package/aframe-svgfile-component
## Dependencies (17)
- [fs](https://npm.io/package/fs.md) 0.0.1-security
- [csso](https://npm.io/package/csso.md) ^3.1.1
- [svgo](https://npm.io/package/svgo.md) ^0.7.2
- [babel](https://npm.io/package/babel.md) ^6.23.0
- [aframe](https://npm.io/package/aframe.md) ^0.5.0
- [babelify](https://npm.io/package/babelify.md) ^7.3.0
- [load-svg](https://npm.io/package/load-svg.md) ^1.0.0
- [uglify-es](https://npm.io/package/uglify-es.md) ^3.0.15
- [uglify-js](https://npm.io/package/uglify-js.md) ^3.0.15
- [uglifyify](https://npm.io/package/uglifyify.md) ^3.0.4
- [svg-mesh-3d](https://npm.io/package/svg-mesh-3d.md) ^1.1.0
- [parse-svg-path](https://npm.io/package/parse-svg-path.md) ^0.1.2
- [three.meshline](https://npm.io/package/three.meshline.md) ^1.0.3
- [extract-svg-path](https://npm.io/package/extract-svg-path.md) ^2.1.0
- [normalize-svg-path](https://npm.io/package/normalize-svg-path.md) ^0.1.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [three-simplicial-complex](https://npm.io/package/three-simplicial-complex.md) ^69.0.6
## Alternatives
- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads
## Recent versions
- 1.1.2 (latest) — 2017-06-16
- 1.0.0 — 2017-02-19
## README
# aframe-svgfile-component
[demo aframe-svgfile-component](http://7dir.ru/aframe-svgfile-component/)
Use SVG files in an AFrame scene. Lines are rendered using THREE.MeshLine, and polygons are normal THREE geometry objects. Supports only quite simple SVG files at the moment.
## Usage
```html
My A-Frame Scene
```
## API
Attribute | Description | Default
--- | --- | ---
width | Width of the image, in AFrame units (meters). | Undefined
height | Height of the image in AFrame units. If only one of `height` or `width` is specified, the other will be set using the image aspect ratio | Undefined
color | Default color for polygons and lines | #c23d3e
debug | Display wireframe instead of filled polygons? | false
strokeWidthToAFrameUnits | Conversion factor between SVG line weight units (pixels) and AFrame world units (meters) | 0.01
opacity | Controls opacity of entire image | 1
curveQuality | How many line segments per curve | 20
Tip: Consider turning on full-scene antialiasing: ``
This component only supports farily simple SVG files. `path` and the geometric primitives (`rect`,`line`,`circle`, `polygon`, etc) are supported. `image` and `text` are not supported; these you should handle separately using AFrame's builtin image and text objects.
Style support is very limited. The component tries to find the fill and stroke color, but it can only handle basic style attributes (like "fill" on a path) and does not read style or class information. Simple "transform='scale(.." and "transform='translate(...' element attributes are parsed.
If width or height are not specified, the image will render using a 1:1 mapping from SVG units (pixels) to AFrame units (meters). The image centers itself at its `position` coordinate.
### TODO
- [three.js mesh extrude](https://github.com/7dir/aframe-svgfile-component/issues/4)
- Reduce dist/* filesize (improve use of uglifyify/babel/--exclude in build process)
- improve support for styles (fill and stroke stuff)
###
Orignal by [7dir](http://github.com/7dir), extended by [morandd](http://github.com/morandd)
## License
MIT
---
_Source: https://npm.io/package/aframe-svgfile-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._