Search code examples
imagesvghrefflip

Flip all embedded Images in a SVG file


I have an SVG file which contains about 50 embedded images. Now I wish to flip all the images vertically. The only way i found that does this is:

  1. Copy the xlink:href to a browser and download the image
  2. Flip the image in any image editor
  3. Convert the image to a href code
  4. Replace the xlink:href with the one newly generated

I don't want to use any SVG programs please, I hope for a coding help

Example code

<svg contentScriptType="text/ecmascript" zoomAndPan="magnify" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"
contentStyleType="text/css" id="svg2" version="1.1" width="460pt" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#" preserveAspectRatio="xMidYMid meet" viewBox="0 0 460 130" height="130pt"
xmlns="http://www.w3.org/2000/svg">
<image x="0" y="0" width="460" xlink:href= "data:image/png;base64,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"
    id="image6418" height="130"/>


Solution

  • Add transform="scale(1, -1)" to the images. You may need to translate them back if they aren't centred round the origin. So in the case above you want to add this to the image element:

    transform="translate(0, 130) scale(1, -1)"