At JSMpros, we love Scalable Vector Graphics! Fluid loves them because they resize (scale) well. We love them because they are just XML documents describing an image. And since they are XML, we can recolor them with browser developer tools or even a simple text editor. In fact, We have videos showing how trivial it is to clone and alter the colors of Oracle-delivered Fluid icons through browser inspector tools (watch online Manipulating SVG Images).
Since we usually just change colors, we prefer to edit Oracle-delivered SVG images through Chrome's inspector and then copy the entire document to a new SVG file. We can then upload the new file through App Designer and use it anywhere. But we discovered an interesting issue. It appears PeopleSoft's internal code doesn't like our new images. When using the Navigation Collections image inspector or uploading a modified SVG through the online branding module, PeopleSoft throws an "Unable to get image extents" error message. What we didn't realize is that copying XML out of Chrome's inspector doesn't copy the XML prolog. All XML documents begin with an XML prolog
<?xml version="1.0" encoding="utf-8"?>
Since SVG is XML, it is required to have a prolog. Browsers are forgiving and will ignore the missing prolog, but PeopleSoft's internal code doesn't.
So what's the solution? We still edit SVG using Chrome's inspector tool, but now we manually insert the XML prolog as the first line. It appears we aren't the only ones to hit this issue. Check out MOS document 2426154.1 for more details.
Are you interested in learning more about PeopleSoft Fluid and Fluid development? Check out our latest live virtual and on-demand offerings.
