embed linked SVG images - svg

I have an SVG file that references lots of other, smaller, SVGs as sub images. Effectively, the main SVG is the template that positions all the other ones.
I'd like to create a single image that I can pass on to people - i.e. a data ref or just inline inclusion - but running the inkscape Embed Images extension results in the error "images are not of type PNG, JPEG, etc".
So it sounds like the inkscape (v0.48.5) extension can only intern bitmap images, not SVGs. Bummer.
My images are referenced from the master SVG like this
<image id="PGDOWN_R1" x="1436.5" y="280" xlink:href="./symbols/PGDOWN_R3.svg"/>
So how can I automatically intern/embed all my externally referenced SVGs? (non-inkscape CLI options are welcome too)

At least as of Inkscape 0.91 you can do this through this menu:
Extensions → Images → Embed Images
Quite easily! 🎉

I ended up using xmllint to parse an SVG file with handles into a file containing the embedded versions of the referenced files, which is not exactly what I mean but it suited my purposes: https://gitlab.com/fommil/attic/blob/master/kinesis-dvorak/create.sh#L37
xmllint --xinclude picture.svg > picture-embedded.svg

Related

How to change linked SVG image to included SVG image in Inkscape?

When importing external SVG images the Inkscape offers three options:
Include SVG image as editable object(s) in the current file
Embed the SVG file in a image tag (not editable in this document)
Link the SVG file in a image tag (not editable in this document)
At first, for convenience I imported an SVG images (Image A) into master SVG image B in the third way (Link the SVG file) so that when editing image A, master image B changes accordingly. However, later in the publishing process, I found that I needed to make sure every part in master image B had to be editable, including those parts within image A.
Had I imported image A in the first way above (include SVG image), this would be possible. I had made some transformations to the linked image A within master image B so I didn't want to do it again. Is there a way to transform a linked image (<image xlink:href="XXX.svg" />) to an included image (<svg>...</svg>) with just a few clicks while preserving all the transformations I did to this image?
Right-click on the image and select 'Embed image'. This is going to embed it as an image, <svg:image ...>, though, not as an svg (I think that would be invalid SVG code, too).
For multiple images, use the extension 'Extensions > Images > Embed Images' without any image selected (or with all of them).

Convert Google Spreadsheet Diagram into SVG and using it in an Ionic app

For a mobile app (built with the Ionic framework), I want to use a diagram I created with Google Spreadsheets. Following the steps described on this page I managed to save the diagram as an .svg file by copying the svg code shown in Chrome Dev Tools.
I then used the .svg file in the src attribute of the img tag, as described in this question.
Unfortunately, this does not show the image. Does the svg code of Google contain some code which doesn't make it render? Here is the link to the svg code.
Standalone external SVG must have a namespace declaration. They are XML files and the browser needs to know what type of XML they are (in this case an SVG).
You'll need to alter the first line of the SVG file to:
<svg xmlns="http://www.w3.org/2000/svg" width="786" height="459" overflow="hidden">
Try that.

How can I tell TYPO3, to not convert SVG graphics to GIF graphics

I'm using TYPO3 6.1 with an Amazon S3 bucket over the File Abstraction Layer.
Now I want to add an SVG image with the "Images Only" content element.
I can select it, but in the frontend, it shows not the svg. It creates a gif file and shows that.
Expected output:
<img src="https://[MYBUCKET].s3.amazonaws.com/images/partner/samsung.svg">
Actual output:
<img src="https://[MYBUCKET].s3.amazonaws.com/_temp_/csm_samsung_caab942deb.gif">
I don't want that TYPO3 convert or copy any File. It should always use the original path. How do I do that?
Look in "Admin Tools" -> "Install" and select "Image Processing" there u can changes the processing file type/format.
But I will not recomment it but about SVG read This
Don't disable image processing. Make sure that SVG is defined as an image type in the [GFX][imagefile_ext] setting in the Install Tool. If SVG isn't explicitly defined as being an image type, TYPO3 will convert it.

Converting bitmap-based KMLs to vector-based KMLs

I have a bunch of kml files each of which contains references to one or more bitmaps (gifs) which have been rotated and georeferenced as image overlays in the kml file. The gifs were generated from CorelDraw.
So it struck me "Corel can export SVG as well as bitmaps. I wonder if it is possible to georeference the SVG output in a similar way in which the bitmaps are georeferenced. e.g. so where it now says
http://www.rott.com/overlay/84.gif
52.52497
52.28735
5.0677
4.48675
0.0
Change that to use an SVG equivalent like
http://www.rott.com/overlay/84.svg
52.52497
52.28735
5.0677
4.48675
0.0
Is that possible and if so, would the individual elements of the SVG file be georeference-able?
Or am I talking nonsense?

App / script for cleaning up SVG files?

I'm looking for an app or a script (web service) that can clean up SVG files, by that I mean removing possible copious data such as metadata. When creating the SVG file I've used standard settings in Adobe Illustrator. Upon export the paths look like this -
M 678.567,252.999 c-0.546-1.307-3.898-3.118-5.005-4.007c-1.596-1.276-1.42-3.375-3.09-4.381c-4.297-2.571-9.604-3.125-13.746-5.916
While I need them be cleaned up and reordered in way like this -
M 600.375,693.40625 598.75,695.03125 596.125,694.34375 594.57422,700.50391 592.25,700.16406 591.875,702.59375 593.875,705.53125 592.75,706.40625 593.9375,710.53125 592.75,710.65625 590.3125,712.90625 589,711.96875 587.1875,712.90625 586.8125,711.40625 584.125,710.53125 581.9375,711.03125
Fairly new to working with SVG. What I need these paths for is drawing up a map with Raphael JS and it seems only to take the paths in that particular way.
I tried Scour (http://www.codedread.com/scour/) but with no success unfortunately (the web service isn't working and there were problems running the procedure with Terminal).
To me it looks like Raphaël should support all of the path syntax in SVG 1.1.
Anyway, ReadySetRaphael.com is a site that provides conversion of a subset of SVG to Raphaël code.
Convert .ttf (or other format) to .svg: https://everythingfonts.com/ttf-to-svg .
Convert the svg. to icons separated icomoon.io/app/#/select,
-Import icons'
-Select the icons that you want export
-Click en 'Generate SVG, PNG, PDF'

Resources