SVGfx

Package Description

SVGfx is a tool to optimize and customize SVG image files in MODX web projects. The main feature is the automatic SVG optimization, compression and cachingof every SVG file used in your web pages. Just install it and let go. SVGfx now has multiple color filters, which can change any color values in svg graphicsaccording to the filter. This makes it easy to uniformly change colors oficons (other filter like darken/lighten/colorize will follow). Filters currently supported are: gray,sepia,bw,colorize,map,lighten,darken,lightness,saturate,desaturate,saturation. Others are planned. It also works as an output filter which can filter colors inside SVGs and automatically compress (.svgz) your files directly at the MODX instance.

Main benefits:

• no more hand-optimizing of SVGs. Just place your normal .svg-Files (from Inkscape maybe) and let MODX do the compression and possible optimizations.
• the web server does not need to compress your SVG files on every request. It just delivers the precompressed svgz and thus you gain performance.
• Cache integrated: every svg file is compressed just once until you clear the cache or the ttl (1 day preset) is down.
• color filters can be applied to style all svgs according to website theme without having to touch each svg file manually.

Usage/Installation Instructions

How to use:

Simply install the package and see the automatic compression working. You should see changed links in your output pointing to assets/components/svgfx/cache/ together with hash numbers as file names.

If you do not want automatic compression to be applied, you need to disable the SVGfx plugin.

Manual/explicit use of the output filter / snippet:You can use SVGfx manually as a snippet or as output filter.The output filter just handles paths to svg files. So if you have an image tv like *imageTV, you can call it simliar to phpthumb:

[[*imageTV:SVGfx=`opt1=1&opt2=2`]]

Or you can choose the snippet style with the parameters separated:

[[SVGfx? &input=`[[*imageTV]]` ¶m_A=`B`]]

Another way is to use one single option with the parameter encoded in URL style:

[[SVGfx? &input=`[[*imageTV]]` &options=`param_A=B¶m_B=Y`]]

You have the following options, which do correspond to the SVGfx system settings:

compress_svg=[1]|0Compress the resulting svg. Default is yes. No need to change this.

cache_svg=[1]|0 Do not cache the result file if set to 1. Causes every file to be processed every call. Useful for debugging.  optimize_svg=[1]|0Do all optimizations pretty_print=[1]|0Applys some basic pretty printing to the outputfilter=gray|sepia|colorize:#val|lighten|darken|lightness[:val]|saturate|desaturate|saturation[:val]|map:m1==c1[||(mx==cx)*] - apply filter. See the file /core/components/svgfx/docs/readme_filters_example.png to have a visualization of the different filters.phPrefix=You can supply a custom prefix to the placeholders which are generated by SVGfx. These placeholders only work if you call it the snippet way and set cache_svg=0 (because values for placeholders cannot be determined quickly if caching is used!)PLEASE WRITE FEEDBACK, FEATURE REQUEST AND BUG REPORTS TO svgfx@inreti.de ! We also would love to see which pages are successfully using this tool. Thx.