_README.md

#Development Workflow For SVG Embedding

Working with svg as an embedded object can be tough, however there a few reasons why I have done this:

• One can manipulate an svg with your normal css
• One can add dynamic content to an svg by using string manipulation

##Equipment

• Illustrator (create svg)
• fixate/pw-mvc-boilerplate on github (A ProcessWire(PW) CMS boilerplate)
  • gulp (Manipulate svg)
• fixate/generator-fixate-pw on github

##Cares and concerns

###XML not seen by PHP If one embed an svg and the server is running an old version of php (< v5.4) then you will get an ugly error and you wont know where this is coming from. Php sees the xml <? declaration and expects php / = but cant find it, then she breaks.

I fixed this issue by reading the svg file and embedding it into the site with echo. As the code shows in asset_embed

###Generator If you did not use the generator allot of waht is used here wont be availible to you in the structure I have.

##Methodology ####- Illustrator Use Illustrator layers panel to name the elements you want to manipulate, when saving these will become id's. Be careful not to have duplicate id's. Illustrator will try and resolve this issue.

You can also remove the colors from the id's and their children that will be manipulated. For the inline styles are inthis case bulking up the svg file.

####- Set the Id's in gulpconfig.php

{
	"svgClasses": {
		"svgs": [
			{
				"filename": "svg-name-1.svg",
				"idInjectClass": {
				  "id": "add class"
				}
			},
			{
				"filename": "svg-name-1.svg",
				"idInjectClass": {}
			}
    ]
}

####- Have gulp manage your Id's

remember to set inject-svg-classes, as in the attached gulp task, as adependency of your imagemin task.

gulp.task 'imagemin', ['inject-svg-classes'], () ->

• Now you'll want to run the inject-svg-classes on a watch task if you want it to do the injections automatically.
• Remember that imagemin will remove all unwanted id's
• Also add the svg path /site/templates/assests/svg to the gulpconfig public folder

####- Use the php functions Embed the svg's where you want. You can add the svg embed functions the the page controllers generated by the fixate pw generator from the boilerplate by doing the following.

//[page name|application]_controller.php
use AssetEmbed;
use InjectContent;
function before () {
  AssetEmbed::assetembedInitialize($this);
  InjectContent::injcontentInitialize($this);
}

####- Style the SVG The whole point is to handle the svg as part of the framework to make it more maintainable therefore, style the svg using the scss framework.

asset_embed.php

<?php
// site/templates/controllers/traits/asset_embed.php

use fixate as f8;

trait AssetEmbed {
	static function __assetembedInitialize($obj) {
		$obj->helper('embed_inline_svg');
	}
	/**
	 * Embed assets.
	 */
	function embed_inline_svg($path) {
		if (Environment::is_production()) {
			// If use MD5# manifest in use get proper path
			if (Environment::use_manifest()) {
				$path = Manifest::prod_path($path);
			}
		}

		$path = f8\Paths::join('assets', $path);
		$content = file_get_contents($path);
		return $content;
	}
}

gulpfile.coffee

gulp.task 'inject-svg-classes', () ->
	for svg in conf.svgClasses.svgs
		stream = gulp.src "#{conf.path.pvt.assets}/svg/#{svg.filename}"
		idInjectClass = svg['idInjectClass']

		Object.keys(idInjectClass).reduce((stream, key) ->
			stream.pipe replace("id=\"#{key}\"", "class=\""+idInjectClass[key]+"\""+" id=\"#{key}\"")
		, stream)
			.pipe gulp.dest("./#{conf.path.pvt.img}")

inject_content.php

<?php

// site/templates/controllers/traits/inject_content.php

use fixate as f8;

trait InjectContent {
	static function __injcontentInitialize ($obj) {
		$obj->helper('overlayCircle');
	}

	function overlayCircle ($svg, $class, $data) {
		$circle_regex = '/(<circle class="php-inject-date.*".*\"\/>?)/';

		$x_regex = '/(cx="*"?)/';
		$y_regex = '/(cy="*"?)/';

		preg_match($circle_regex, $svg, $matches, PREG_OFFSET_CAPTURE);
		preg_match($x_regex, $matches[0][0], $x_match, PREG_OFFSET_CAPTURE);
		preg_match($y_regex, $matches[0][0], $y_match, PREG_OFFSET_CAPTURE);

		$x = substr($matches[0][0], $x_match[0][1]+4, strpos($matches[0][0], '"', $x_match[0][1]+4) - ($x_match[0][1]+4));
		$y = substr($matches[0][0], $y_match[0][1]+4, strpos($matches[0][0], '"', $y_match[0][1]+4) - ($y_match[0][1]+4));

		$html = "<text class=\"svg__date\" text-anchor=\"middle\" x=\"{$x}\" y=\"{$y}\" dy=\"0.5ex\">{$data}</text>";

		$svg = substr_replace($svg, $html, $matches[0][1] + strlen($matches[0][0]), 0);

		return $svg;
	}
}