I was looking into SVG code, and i see that first time:
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 342 472"><defs><style>.cls-1{isolation:isolate;}</style></defs><title>Artboard 1</title><image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="314" height="200" transform="translate(14 272)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAToAAADICAYAAAB4by36AAAACXBIWXMAAAsSAAALEgHS3X78AAAcrklEQVR4Xu2dbXfjKLNFDwWS08///623Ewuo+wHhKJ6knTg6vEjstWYm3UujyBJsVwGFjKpiMPgJ0/xiHh3DZLm+jkY7+BFmiG4A1JcXiyHFATBEdxqOKrLfMkR4DoboDsYQ2j4MAR6LIbpOGUKrwxBgnwzRdcCQWtsM+bXPEF2DDLH1zRBfewzRNcAQ27EZ4qvPEF0lhtzOyZBeHYboCjHENviMIb4yDNERGXIb/IQhPR5DdDsz5DbYgyG9fRmi24EhtwGTIb3fM0T3JENuCTdditwHv7yNhoohvWcZovsBZ5DbVlzGyPvnNabNz75pwKrx9vMZxDik932G6L7B0QSXZXYTWasS24u1kWcRHk2CQ3iPGaL7giPI7XRC+ykHFOCQ3ucM0d ...
Why is it says:
xlink:href="data:image/png
If it's not png?
It's a PNG that has been encoded as a data url and embeded in a SVG file, utilizing the <image> tag.
From certian details its possible to see this has been produced with Illustrator. Probably someone has placed the PNG into an artboard, choosing not to link but to embed the file, and then exported to SVG.
Related
Using the Imagick CLI with the example SVG document coded below, the images do not render in the png, however if convert the SVG to an html document it all loads. I can decode the base64 online and it shows the valid image, and tried different Image tag notation. I am lost at what I am doing wrong.
magick .\test.svg image.png
ImageMagick 7.1.0-49 Q16-HDRI x64 7a3f3f1:20220924
Windows 10 OS
Example Code that is not Rendering:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="position: relative; overflow: hidden;" version="1.1" id="natal_chart" width="800" height="800" viewBox="0 0 800 800">
<image x='322' y='402' preserveAspectRatio='none' href='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'></image>
<img src='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'/>
</svg>
If you want to use the above code as a standalone SVG file that you feed to ImageMagick, you need to do several things:
Use a default namespace: xmlns="http://www.w3.org/2000/svg" in addition to the xlink namespace declaration
Use the xlink namespace for the href attribute
Install Inkscape. If it is in PATH, imagick will pick it up to render the file. Do not use librsvg, it will fail.
Do not include the invalid <img> tag from the HTML namespace.
This file was rendering for me in Inkscape, but not with rsvg-convert:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" viewBox="0 0 800 800">
<image x='322' y='402' preserveAspectRatio='none' xlink:href='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'></image>
</svg>
As for ImageMagick, I was running into problems because librsvg was installed in parallel, and despite what the documentation says, was prefered. But as in the optimal case the conversion is delegated to Inkscape anyway, you can use it directly in CLI mode:
inkscape -o image.png .\test.svg
I have a SVG file (an exported Gliffy diagram) that I want to open and edit in Inkscape. When viewing the code of the file using the developer options of Chrome, it looks like:
<svg xmlns="...>
<g transform="...>
<image xlink:href="data:image/svg+xml,%0A%20...></image>
</g>
... (about 20 more <g>...</g> tags)
</svg>
When decoding the part starting with %0A%20..., it translates to something like
data:image/svg xml,
<svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
<style>
.gliffy-rte-text {
...
The issue is, that in Inkscape those parts will be replaced by a placeholder telling me "Linked image not found" and as speculated here, Inkscape most likely is not able to read the CSS styling correctly or probably at all.
I would very much appreciate any thoughts or ideas on how to convert the file such that it can be edited and displayed correctly in Inkscape.
You might convert all styling to element attributes using SVGOMG:
replace your embedded <image> element by the decoded data url content. Your parent svg should look something like this:
<!-- parent svg -->
<svg xmlns="http://www.w3.org/2000/svg" >
<!-- embedded svg decoded data url -->
<svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
<style>
.gliffy-rte-text {
}
</style>
</svg>
</svg>
Use SVGOMG "inline styles" and "style to attribute"parameter:
You should disable all other optimizing parameter, since they might strip to many other attributes.
Expected before result
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<style>
circle{
fill:none;
stroke: orange;
stroke-width:10;
}
</style>
<circle cx="128" cy="128" r="100"/>
</svg>
After
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<circle cx="128" cy="128" r="100" fill="none" stroke="orange" stroke-width="10"/>
</svg>
Open the wrapper file in a browser. Right-click on the area containing the embedded SVG, and choose "Save (image) as...". If the wrapper contains multiple <image> tags, you will have to save them to separate files, but at least they will be in a form Inkscape can handle.
If you want to get them all together in one SVG file again, you will have to re-import them via the Inkscape import function. Take care to select 'Include as editable object', or you will end up right where you started:
The speculations above about CSS are unsubstantiated, btw. Inkscape will convert the content of a <style> element into inline style attributes, but otherwise handle them correctly. What happened is stated quite clearly in the above screenshot: data URLs embeded via an <image> tag will not be editable in Inkscape.
I'm learning to work with svg icons and now trying to directly extract icons from psd. With adobe photoshop 2017 it's possible to export image as svg code. However in this code instead of tag is generated tag (as I understand this is base64 encoding?!). Because of that I can't modify icons, for example, give them different color (fill) etc.
My question is - what is the best way to convert image to svg, so that it would contain tag, preferable with photoshop?
Basically, I want something like this:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/>
<path d="M22.7 19l-9.1-9.4z"/>
And this is approximately what I get using photoshop:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="48" viewBox="0 0 34 48">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image width="34" height="48" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gT="/>
</svg>
P.S. I tried several online decoders from base64, but didn't find them useful.
After all I found most useful this tool - vectormagic (editor's note: after going through the process, it asks you for $10 to download your result). It convert to svg fast and very precise, and you don't have to do a lot of customization. On the image, first icon is inkscape result and second is from vector magic.
Maybe I missed something in inkscape for the result to be this perfect. In that case please point it out. Anyway, vector magic saves a lot of time and I haven't found flaws with it..yet.
1.- Open your icon with Illustrator.
2.- Clic in file > export > export to screen.
3.- Select the svg extention and save.
3.- Open your svg file with a browser
4.- Clic in Inspect Element (or F12)
That's all, in the elements tab is your svg code path
I downloaded some 16x16 SVG icons that used the viewbox attribute to scale the original code to fit into 16x16 canvas on download. Now what I am experiencing is that I can not insert the SVG from an external file anywhere as the viewbox attribute just isn't working on it. If I place the SVG code inline then it works.
Am I missing something, or is this just how it is?
Here is the code.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="16" viewbox="0 0 48 48" width="16">
<path clip-rule="evenodd" d="M37,47H11c-2.209,0-4-1.791-4-4V5c0-2.209,1.791-4,4-4h18.973
c0.002,0,0.005,0,0.007,0h0.02H30c0.32,0,0.593,0.161,0.776,0.395l9.829,9.829C40.84,11.407,41,11.68,41,12l0,0v0.021
c0,0.002,0,0.003,0,0.005V43C41,45.209,39.209,47,37,47z M31,4.381V11h6.619L31,4.381z M39,13h-9c-0.553,0-1-0.448-1-1V3H11
C9.896,3,9,3.896,9,5v38c0,1.104,0.896,2,2,2h26c1.104,0,2-0.896,2-2V13z M33,39H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18
c0.553,0,1,0.448,1,1C34,38.553,33.553,39,33,39z M33,31H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1
C34,30.553,33.553,31,33,31z M33,23H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1C34,22.553,33.553,23,33,23 z"
fill-rule="evenodd"/>
</svg>
Note that it's viewBox not viewbox - the browser might save you sometimes, but not always.
See the following for full details:
https://jsfiddle.net/t88pLgbb/4/
I'm generating an SVG file on a website and it's supposed to be imported in Ilustrator. I use <symbol /> element to store a shape definition and I reference it with the <use /> element on the "sheet". Users are able to set size of the shape and it's really crucial that it's exactly the same size when imported to Adobe Illustrator. It works unless I add a stroke.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="210mm" height="297mm" viewBox="0 0 210 297" viewbox="0 0 210 297">
<defs id="SvgjsDefs1001">
<symbol id="shape_id70" preserveAspectRatio="xMinYMin meet" viewBox="0 0 27.841039657592773 12.2083101272583">
<path id="SvgjsPath1030" d="M26.4405 13.067C25.685728 11.72066 22.49458 8.90142 20.73442 7.678030000000001C22.99088 7.6388854 23.85819 7.6146637 28.738950000000003 7.456081C26.298620000000003 6.628644 23.737080000000002 5.904501 21.418080000000003 4.973881C23.937200000000004 4.5081560000000005 26.519460000000002 4.085806000000001 28.376120000000004 3.7947010000000008C28.376120000000004 3.7946453179000006 19.370760000000004 2.7013810000000005 8.358420000000002 4.414499000000001L9.412540000000002 1.364679000000001L6.497860000000001 3.520859000000001L4.442800000000001 0.858699000000001L4.324531000000001 4.464059000000001L0.897911000000001 5.542179000000001L4.249861000000001 6.913239000000001L4.236664300000001 10.198599000000002L6.192894300000001 7.622079000000001L9.099554300000001 8.802649L8.143547300000002 6.432539C12.463087300000002 6.813516 22.5756473 8.818239 26.440547300000002 13.067009Z" fill="none"></path>
</symbol>
</defs>
<use id="SvgjsUse1034" xlink:href="#shape_id70" x="0" y="0" width="50"></use>
</svg>
This is fine in both browser and Illustrator. But when I add attributes stroke-width="0.1" stroke="#000". In Illustrator, the size of the shape changesto 48.951. It's still 50 in browser though. I tried to add these attributes to the <symbol />, <path /> and <use /> elements with the same result.
I know that the SVG standard doesn't have any attribute that would control how to render the stroke. I know there is a discussion about the stroke-alignment attribute for future versions of SVG. But browsers don't support that yet, and neither Adobe Illustrator.
So my question is: Is there any way how to adjust the SVG so that Illustrator would render the shape with the size that is set by the width attribute in the <use /> element regardless of the stroke settings
The width value on your <use> should be having no effect on your <symbol> because your symbol has no viewBox attribute. Without a viewBox, only the x and y attributes of the <use> will be doing anything.
Also, be aware that we've seen a few questions on S.O. in the past, complaining about bugs in Illustrator's SVG import filter. If <symbol> is working, then that's great. However, in general, you may find that keeping your SVG structure simple, and avoiding the more advanced SVG features, might be a good idea.