sass-inline-svg - Inline url-encoded SVG with Sass. Optional variable string replacement included!

  •        245

Sass-inline-svg adds a inline_svg function you can use with Sass. It url-encodes the contents of the specified file and inlines it in your CSS (Url-encoded SVG is about 30% smaller than base64). When working with plain Sass, you'll have to use the full path to the svg file, when using Rails the path will be resolved by the Rails asset pipeline.

https://github.com/franzheidl/sass-inline-svg

Tags
Implementation
License
Platform

   




Related Projects

sass-svg - Inline SVG for Sass.

  •    CSS

Inline SVG for Sass. This shows how you can use nesting and variables to create complex SVG shapes.

svg-sprite - SVG sprites & stacks galore — A low-level Node

  •    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

vivid - a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

  •    Javascript

Vivid.JS is an SVG Icons library which can be used to add highly customizable vibrant icons to the DOM without any dev dependencies. Vivid.JS is easy to adapt and can bring SVG icons to life using html5 data attributes on the go. Icons can also be individually customized in terms of colors and size using html5 data attributes which gives more power to Vivid.JS library.

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.


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.

postcss-inline-svg - PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

  •    Javascript

PostCSS plugin to reference an SVG file and control its attributes with CSS syntax. See PostCSS docs for examples for your environment.

svg-react-loader - Webpack SVG to React Component Loader

  •    Javascript

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

Chartist-js - Simple responsive charts

  •    Javascript

Chartist.js is a simple responsive charting library built with SVG. Its goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. It's important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers today and say good bye to the idea of solving all problems ourselves.

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.

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.

angled-edges - :triangular_ruler: Quickly create angled section edges using only Sass

  •    CSS

A Sass mixin for creating angled edges on sections by dynamically encoding SVGs. The main mixin creates an svg right triangle that is encoded, set as a background image of a pseudo element, and absolutely positioned.

iconizr - A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output

  •    CSS

To leverage iconizr to the greatest extent possible, some additional tools have to be installed on the system independently (see below). iconizr is written in (namespaced) PHP and meant to be used on the (Linux) command line (i.e. with the PHP CLI SAPI). To be honest, there was only one reason making me go for PHP: It is what I know best. Im sure there are quite some other fancy modern languages and techniques one could use for achieving the same, but I guess I'm just not smart enough for those. Having said this, I'd welcome anyone contributing a port of iconizr.

svg-icon-system-boilerplate - A boilerplate for building a custom icon system via a linked external SVG sprite

  •    HTML

A boilerplate for building a custom icon system via a linked external SVG sprite. Configuration Options -- this system is based on SVG-sprite. sprite.svg is the main file containing a sprite of each SVG included using <symbol> inside of SVG <defs>. This system implements SVG icons via to access individual icons.

simple-icons - SVG icons for popular brands

  •    HTML

Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub. Started by Dan Leech. Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.

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.

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

d3-pre - Pre-render d3 visualizations

  •    HTML

A JavaScript library that pre-renders d3 visualizations into inline SVG elements, to reduce perceived page-load time and cut down on unwanted paint flashes. The pre-rendering tool uses a headless browser to turn d3 code into its resulting SVG, and inserts the markup into your HTML. Then, the d3-pre JavaScript library overrides d3.append to check if a pre-rendered DOM node already exists before creating a new one. This approach allows you to use pre-rendered SVG without changing your visualization code.