I want to convert the SVG file below with ImageMagick's convert to an PNG file. Unfortunately I can't figure out how to call convert so that the opacity value of the rectangle is taken into account. When I open the svg with inkscape and save it as png the opacity value is used so I assume the svg file is correct. (The reason I want to use "convert" is that inkscape is not installed on the server I am using) I use convert right now in the most simple way, any additional parameters I tried did not have any positive effect (convert first time user...)
convert test-alpha.svg test-alpha.png
Thanks buddies
martin
UPDATE: tested on OSX Mountain Lion, ImageMagick 6.8.8-3 Q16 x86_64 2014-02-19 (installed via mac ports)
UPDATE2: Just tried it on a linux machine and, as nwellnhof already commented, it does it correct there. So it seems a particular OSX related problem
<?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" id="qi-svg" class="quote-image" width="640" height="480" style="width: 640px; height: 480px;">
<rect id="background" width="150" height="300" style="opacity: 1;fill: #aa0000" transform="translate(200,0)" />
<rect id="background" width="150" height="300" style="opacity: 0.1;fill: #aa0000" />
</svg>
1) correct png via inkscape
2) png via convert
I reinstalled ImageMagick on OSX with the following ports command
sudo port install imagemagick +rsvg
and it works now, the +rsvg made the trick.
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'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 have a problem with svg files, where linked images don't show up when opened with any program. Strange thing is, all has been working fine up to just a few days ago! I did noting to change the files and the referenced image is perfectly fine and sits in the same folder. Now, the following svg just shows an empty black canvas, no matter if I open it with the image viewer, an internet browser or an image processing program:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd.">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<title> state0709.svg</title>
<defs>
<image id="mol" width="6px" height="3px" xlink:href="PTCDA.svg" />
</defs>
<rect x="0" y="0" width="600" height="600" />
<use x="492" y="250" xlink:href="#mol" />
</svg>
I have absolutely no clue what I broke and why it doesn't work anymore.
Thanks for your help!
EDIT:
Ok, so apparently it is a problem with the scaling of the referenced image. It just takes the top left 6x3 corner and renders that, instead of resizing the image down to 6x3. How do I get the image to resize? I know it did it before...
Btw, size of PTCDA.svg is width 200, height 100 px.
Try adding a fill value to the rect.
I'm trying to create an SVG document that includes image tags referencing png files. This works if I include the absolute path of the png in every image tag but if I try putting an xml:base attribute in it doesn't seem to work in IE9. However it does seem to work Firefox and Chrome. Is there a bug in IE or is there something wrong with my syntax?
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:base="file:///C:/SVG/Devices/valves/">
<image width="40" height="56" x="10" y="10" xlink:href="motorised_valve[purple].gif"/>
</svg>
For complicated reasons I don't want to go into here, I can't put the SVG document into the same folder as the images.
Thanks for any help
Mog
Would it be acceptable in your case to embed your PNG images in your document using the data:// protocol? That would solve your problem, at the expense of potentially making the XML rather large.
I've been trying to get XPointer URIs working in an SVG file, but haven't had any luck so far. After trying something more complicated and failing, I simplified it down to just referencing an ID. However, this still fails.
The spec seems pretty clear about this implementation:
http://www.w3.org/TR/SVG/struct.html#URIReference
I found an example online of what should be a working XPointer reference within an svg document. Here is the Original. Here is the version I copied out:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="simpleRect" width="100px" height="75px"/>
</defs>
<use xlink:href="#simpleRect"
x="50" y="50" style="fill:red"/>
<use xlink:href="#xpointer(id('simpleRect'))"
x="250" y="50" style="fill:yellow"/>
</svg>
This should display two rectangles... one red and one yellow. I tried rendering with Firefox 3.6 and Inkscape 0.47. No success. Only the Red rectangle shows.
What am I missing?
Thanks for any help you can offer
There is currently (as of 10 March 2016, SVG 1.1 Second Edition) no support for rendering XPointers in browsers. W3Schools writes about this as follows:
XPointer Browser Support
There is no browser support for XPointer. But XPointer is used in other XML languages.
It's kind of frustrating, because all the official documentation does not bother to distinguish between browser-supported (Internet ready) features of SVG and the technically-supported, purely XML-like features of SVG.
From the linking section of the spec:
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ] -or-
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]
So what is the benefit of using xpointer syntax? All svg implementions I've seen have supported the alternative (shorter) syntax shown above (#myId). The xpointer syntax seems to be less well supported.