Last summer I made a mention of my SVG process in a thread.
That’s funny you say Compass was well known for it’s sprite generator because I’ve heard that as well. And when I heard that I thought– why would I need to use sprites? I use almost strictly SVG nowadays.
This implies that SVGs are better than sprites. If anyone has any counter arguments to that, I’d love to hear it.
My process has changed a bit since I posted that, so here’s my current process:
Open vector graphic in Adobe Illustrator
Tip: Make sure everything gets turned into a path (unless you want to retain actual text, but I’m not sure Google can crawl a word within an SVG so I don’t suggest doing this on important keywords). You can do this by:
For strokes: Object > Path > Outline Stroke For text/fonts: Right click > Create Outlines
Now save it as an SVG (I save mine to Sage/assets/svg/originals).
Optimize your /originals. Run: $ svgo -f Sage/assets/svg/originals -o Sage/assets/svg (This will save the optimized versions to your svg folder, but retain the originals, which is important because over optimizing them can screw everything up as you’ll see in my video below).
Now rename your newly optimized SVGs with inline- as a prefix to the file name and add .php after the .svg extension. So logo.svg becomes inline-logo.svg.php.
Now add this line of php to your desired php page: <svg><?php get_template_part( 'assets/svg/inline', 'logo.svg' ); ?></svg>
Now you have inline SVGs, which make it SO much cleaner to work with in my opinion. You can even animate them or alter the styles in CSS.
We’re almost there, but I’ve found it usually takes a little bit of tweaking in the CSS to make sure SVGs don’t start over-writing the other SVGs CSS styles (which are usually called .st0, .st1, .st2, etc).
I hope that helps you guys streamline an SVG process that works for you. If anyone has alternate methods or tips, I would LOVE to hear them. Thanks!
Edit: I noticed roots.io uses icomoon. I’ve used their icons packs, but never the custom SVGs. It would be cool to hear a pro/con list of icomoon vs. inline-svgs.
Great. I’ll try it. At the moment I’m using javascript to convert included img svg in svg inline code. This is the script:
$('img.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'));
}
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
Otherwise, I’m going to take a shot at it tomorrow when I get up. I’d like to get this working to optimize a couple sites I’m working on verse using an icon font where I only use 5% of the icon’s in a single project. If the project really needs the optimization, in the past I’d just strip the icon font using icomoon but this seems a lot more sane for the future.
Blade SVG for Sage
Since Sage 9 uses sage() as it’s container instead of app(), we are unable to use a majority of Laravel’s service providers.
For that reason, I’ve reworked Blade SVG and turned it into a WordPress plugin to be used solely with Sage 9.
It’s still quite early, but I’d appreciate anyone testing it out and reporting any issues. I also added some filters to be able to control configuration.
Hey, thanks for your work! Could you give some more input on how to use it?
I’m installed your plugin via composer, but @svg() directives still get rendered as plain old text.
Is there any additional configuration i need to do?
A small example in your Readme would be highly appreciated.
// app/helpers.php
if (! function_exists('svg_path')) {
/**
* Path to a certain SVG file in our assets folder
*
* @param string $file
* @return string
*/
function svg_path(string $file) : string
{
return get_template_directory()."/assets/svg/{$file}";
}
}
And in your files
<?php include App\svg_path('name.svg'); ?>
or
@php (include App\svg_path('name.svg'))
This way you can style the svg from css as well…
Corrected as per @shoetten’s remark. Thanks
It’s the way I have it in my blade file; I mainly use Laravel and my helpers file is not namespaced, that’s why I forgot about adding the App namespace
Thanks, that’s a decent way to do this. Something like blade svg would still be cool though, so i can add custom classes to the svg markup for example or use svg sprites, if that’s better suited for the project than inlining everything.
PS: Just a little note for future reference: You need to specify the namespace in your view, to make this work. So it would be: @php(include App\svg_path('file.svg'))
Similar to asset_path and @asset. Might be worth including something like this into sage?
No automatic optimisation with webpack or anything fancy like that, but it works very nicely apart from that and is capable of adding a custom class to your svg.
Hey @shaimoom,
hmm, i never experienced this error.
But i haven’t tried this with the most recent version of sage. It is possible that an update broke something…
I store my svgs in web/app/themes/<YOUR_THEME_FOLDER>/resources/assets/svg, but you can configure that in helpers.php as you like…
If you can upload a minimal reproduction in a git repo somewhere, i can have a quick look into your code, if you want.
@shoetten Thanks for offering to inspect my code, but it was my mistake: I inserted the directive outside of the “Setup Sage options” function that starts with
add_action('after_setup_theme', function ()...
After putting it inside the function, the directive worked as expected! Thanks.