svgify - A browserify transform for requiring SVG files to embed directly in your code.

  •        36

A browserify transform for requiring SVG files to embed directly in your code.The intention is to be able to quickly inline files saved from Illustrator - it's still a bit rough around the edges, but should improve over time.

https://github.com/hughsk/svgify

Dependencies:

through : ~2.3.4
trumpet : ~1.5.4

Tags
Implementation
License
Platform

   




Related Projects

SVGInjector - Fast, caching, dynamic inline SVG DOM injection library

  •    Javascript

A fast, caching, dynamic inline SVG DOM injection library. Developed by Waybury for use in iconic.js, part of the Iconic icon system. There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.

react-inlinesvg - An SVG loader component for ReactJS

  •    Javascript

But there's an alternative that sidesteps these issues: load the SVG with an XHR request and then embed it in the document. That's what this component does. The SVG <use> element can be used to achieve something similar to this component. See this article for more information and this table for browser support and caveats.

uglifyify - A browserify transform which minifies your code using UglifyJS2

  •    Javascript

A Browserify v2 transform which minifies your code using uglify-es.But uglifyify is able to yield smaller output by processing files individually instead of just the entire bundle. When using uglifyify you should generally also use Uglify, to achieve the smallest output. Uglifyify provides an additional optimization when used with Uglify, but does not provide all of the optimization that using Uglify on its own does, so it's not a replacement.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

sheetify - :sparkles: Modular CSS bundler for browserify

  •    Javascript

Modular CSS bundler for browserify. Works with npm modules like browserify does. Sheetify is very good for namespacing static css assets in your javaScript code. Currently there is no support for dynamic variables within sheetify, however you could achieve this by setting the inline style property of an element.


svgxuse - A simple polyfill that fetches external SVGs referenced in use elements when the browser itself fails to do so

  •    Javascript

A simple polyfill that fetches external SVGs referenced in <use> elements when the browser itself fails to do so. IE (9, 10, 11) fails to load symbol-defs.svg in the example above. svgxuse goes through every <use> element. If the element is referencing an external SVG and the browser has failed to load it, the script sends a GET request to grab and prepend the SVG to <body>.

inline_svg - Embed SVG documents in your Rails views and style them with CSS

  •    Ruby

Styling a SVG document with CSS for use on the web is most reliably achieved by adding classes to the document and embedding it inline in the HTML. This gem adds a Rails helper method (inline_svg) that reads an SVG document (via Sprockets, so works with the Rails Asset Pipeline), applies a CSS class attribute to the root of the document and then embeds it into a view.

svg-pan-zoom - JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks

  •    Javascript

It works cross-browser and supports both inline SVGs and SVGs in HTML object or embed elements. If you found a bug or have a suggestion first check if there is a similar open or closed issue. If there are none then create a new one.

yt-player - Simple, robust, blazing-fast YouTube Player API

  •    Javascript

Most of the existing YouTube API packages on npm are incomplete or overcomplicated.Create a new YouTube player. The player will take the place of the HTML element element. Alternatively, element can be a selector string, which will be passed to document.querySelector().

debowerify - A browserify transform to enable the easy use of bower components in browserify client javascript projects

  •    Javascript

A browserify transform to enable the easy use of bower components in browserify client javascript projects. This can be used in conjunction with deamdify to require AMD components from bower as well.

browserify-shim - 📩 Makes CommonJS incompatible files browserifyable.

  •    Javascript

For a version compatible with browserify@1.x run npm install browserify-shim@1.x instead. For a version compatible with the v2 API npm install browserify-shim@2.x instead.

react-transform-hmr - A React Transform that enables hot reloading React classes using Hot Module Replacement API

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. A React Transform that enables hot reloading React classes using Hot Module Replacement API. Hot module replacement is supported natively by Webpack and available in Browserify with browserify-hmr.

ImageMagick

  •    C++

ImageMagick is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

vinyl-source-stream - :cyclone: Use conventional text streams at the start of your gulp or vinyl pipelines

  •    Javascript

Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream ecosystem.Take, for example, browserify. There are the gulp-browserify and gulpify plugins, which you can use in combination with gulp to get browserify working in your build. Unfortunately, these plugins come with additional overhead: an extra GitHub repository, npm module, maintainer, tests, semantics, etc. It's much simpler in this case to use the original module directly where you can, which is what vinyl-source-stream handles for you.

vueify - Browserify transform for single-file Vue components

  •    Javascript

Vue component transform for Browserify

envify - :wrench: Selectively replace Node-style environment variables with plain strings.

  •    Javascript

Selectively replace Node-style environment variables with plain strings. Available as a standalone CLI tool and a Browserify v2 transform.Works best in combination with uglifyify.

rollupify - Browserify transform to apply Rollup

  •    Javascript

Browserify transform to apply Rollup, converting ES6/ES2015 modules into one big CommonJS module. This tends to result in smaller bundle sizes, due to Rollup's tree-shaking and scope-hoisting capabilities.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.