Been having a little issue with my inline SVGs and would love some suggestions. I’m creating them in Illustrator so I’ve been running them through this filter I created to clean them up as well as allow them to be displayed 100% width to scale using the preserveAspectRatio and padding trick I read about:
//$svg_path variable contains the path to the svg code
$return_raw = file_get_contents($svg_path);
//Cleans out Illustrator extra jazz
fileContent = preg_replace('#<!--.*?-->#s', '', $return_raw);
$cleansed = preg_replace('#<(\w+)(?:\s+[^>]+)?>\s*</\1>#s', '', $fileContent);
$html = str_replace('<svg', '<svg style="width:100%; padding-bottom:92%; height:1px; overflow: visible" preserveAspectRatio="xMidYMin slice"', $cleansed);
This was working great I thought as I could now size the container responsively and the SVG scaled accordingly but then realized Firefox wasn’t displaying anything at all although it was working fine in Chrome and Safari.
So in order to get this working I realized on Firefox if I removed the style attribute and change the svg width and height both to 100% I’m back to getting the desired results. But I'm stumped on why I can't get preg_replace to work on my svg filter to replace the width and height.
Here is the revised code I’ve been attempting but can’t get it to change the width and height attributes.
$return_raw = file_get_contents($svg_path);
//Cleans out Illustrator extra jazz
fileContent = preg_replace('#<!--.*?-->#s', '', $return_raw);
$cleansed = preg_replace('#<(\w+)(?:\s+[^>]+)?>\s*</\1>#s', '', $fileContent);
$svg = str_replace('<svg', '<svg preserveAspectRatio="xMidYMin slice"', $cleansed);
//Tried this
$svg_dimensions = preg_replace(array('/width="\d+"/i', '/height="\d+"/i'),array(sprintf('width="%d"', '100%'), sprintf('height="%d"', '100%')),$svg);
//And This
$svg_dimensions = preg_replace('/width="(\d+)"\s*height="(\d+)"/', 'width="100%" height="100%"', $svg);
Any suggestions would be greatly appreciated. Cheers
Just got it to work with this preg_replace function
$svg_dimensions = preg_replace("/(width|height)=\".*?\"/","\${1}=\"100%\"", $svg );
Always have trouble with preg_replace lol