using icomoon with SVGs from illustrator cc - svg

I've fallowed the video
http://www.youtube.com/watch?v=8oQCkxfK5Ho#t=236
I'm exporting svg from Illustrator CC (I've tried almost all variations of options) but always get this message:
"Please select images or fonts in SVG, or JSONs exported by IcoMoon."
I've tried other apps (fontello, fontastic, etc) but get the same error ("unknown format").
my svg (one of them looks something like this):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30.6px" height="28.3px" viewBox="0 0 30.6 28.3" enable-background="new 0 0 30.6 28.3" xml:space="preserve">
<path id="checkbox-12-icon" d="M27.4,9.1c0.6,1.6,0.9,3.3,0.9,5c0,7.8-6.3,14.2-14.2,14.2C6.3,28.3,0,22,0,14.2C0,6.3,6.3,0,14.2,0
c3.3,0,6.4,1.1,8.8,3c-0.8,0.6-1.7,1.3-2.5,2c-1.8-1.3-4-2-6.3-2c-3,0-5.8,1.2-7.9,3.3c-2.1,2.1-3.3,4.9-3.3,7.9
c0,3,1.2,5.8,3.3,7.9c2.1,2.1,4.9,3.3,7.9,3.3c3,0,5.8-1.2,7.9-3.3c2.1-2.1,3.3-4.9,3.3-7.9c0-0.7-0.1-1.4-0.2-2.1
C25.9,11,26.6,10,27.4,9.1z M16,22.2c5.5-9.9,9.4-15,14.6-19.6L30,1.1C23.6,5,20.2,8,15,13.9c-2.8-2-4.3-2.9-6.8-4.1l-2.1,1.9
C10.3,15.7,12.6,18.2,16,22.2z"/>
</svg>
I've spent 2 days on this but can't figure out What am I missing ??

After trying this for 2 days I've changed my browser to Chrome and it worked (without any error message).
So that has been a Firefox thing. (Damn you Mozilla !)

Related

SVG not displayed when hosted

i hosted a website on localhost - there is everything fine. but when i upload it to my hoster the svg is not displayed - whether if i load the page nor if i go to the svg (which is seperatet in a .php file) directly.
The opening lines of my svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 620 620" width="auto" height="100%"><path d=" M 284 11.7 C 239.8 16.1 197.2 29.5 160.2 50.7 C 125.5...
Is there any mistake? I cannot figure it out.
Deleting the following part fixed it. I do not have an explanation.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

SVG not opening with inkscape command line but opens with gui

I am quite new to inkscape and I would like to process a batch of SVGs using the command line interface with the following command (in the same directory as the SVG):
$ inkscape -D -z NMY.svg
However, when I try to load an SVG with the CLI I get the following warning:
** (inkscape-bin:8875): WARNING **: Can't open file: NMY.svg (doesn't exist)
** (inkscape-bin:8875): WARNING **: Can't open file: NMY.svg (doesn't exist)
** (inkscape-bin:8875): WARNING **: Specified document NMY.svg cannot be opened (does not exist or not a valid SVG file)
However, opening the same SVG from the GUI properly displays the image.
Here is the header SVG in question in case there is something wrong with it:
<?xml version='1.0' encoding='iso-8859-1'?>
<svg version='1.1' baseProfile='full'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns:rdkit='http://www.rdkit.org/xml'
xmlns:xlink='http://www.w3.org/1999/xlink'
xml:space='preserve'
width='250px' height='150px' >
I am using inkscape Inkscape 0.92.2 5c3e80d, 2017-08-06 on MacOS 10.14.
Thanks!
Found the problem, I had to specify the absolute path to the file.

Graphviz -> svg (->pdf) text flows out of the box for some viewers

An svg file generated from graphviz looks fine in some viewers (Chrome, Gnome Image Viewer) but doesn't in others (Inkscape, when converting using ImageMagick to pdf).
Here's what my minimal example looks like, on the left is Chrome (correct rendering), on the right is Inkscape (wrong):
The above was generated by this graphviz code:
digraph {
node [shape=box];
foo[label="long text long text long text"]
}
SVG produced by:
dot g.txt -Tsvg -o g.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
-->
<!-- Title: %3 Pages: 1 -->
<svg width="177pt" height="44pt"
viewBox="0.00 0.00 177.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40)">
<title>%3</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-40 173,-40 173,4 -4,4"/>
<!-- foo -->
<g id="node1" class="node"><title>foo</title>
<polygon fill="none" stroke="black" points="169,-36 0,-36 0,-0 169,-0 169,-36"/>
<text text-anchor="middle" x="84.5" y="-14.3" font-family="Times,serif" font-size="14.00">long text long text long text</text>
</g>
</g>
</svg>
What is causing this? Am I doing something wrong? How do I fix it?
Thanks!
Program versions:
graphviz version 2.38.0 (20140413.2041)
Inkscape 0.92.2pre0 (973e216, 2017-07-25)
GNOME Image Viewer 3.26.2
Chrome Version 69.0.3497.92
ImageMagick 6.9.9-34 Q16 x86_64 2018012
Using Imagemagick 6.9.10.11 Q16 Mac OSX with inkscape #0.92.3_4, I get the following. Note I just convert to jpg to be able to post here. The pdf is the same.
convert test.svg test.pdf
convert test.pdf test.jpg
So I conclude it is either your Imagemagick version or more likely your version of Inkscape or a faulty install.

FluidTYPO3 vhs ViewHelper for SVG Images?

I use TYPO3 CMS 6.2.14, vhs 2.3.3, Flux 7.2.1 and FluidContent 4.3.1 - my TYPO3 Editor need the opportunity to upload SVG-Images via vhs-ViewHelper. I've made a new FluidTYPO3 Content Element (FCE), but there's no SVG Image visible in frontend. Mmhh?
Flux-FlexForm
<flux:field.file name="imgIcon" allowed="jpg,gif,png,jpeg,svg" uploadFolder="uploads/tx_myext" minItems="0" maxItems="1" size="1" />
...
<v:media.image src="uploads/tx_myext/{imgIcon}" alt="Icon" />
Output
<div class="small-2 columns">
<img alt="Icon" src="" width="" height="">
</div>
Also I use the htaccess entry, but there is no success. Where's my fault? Do I need heightand widthfor this ViewHelper? Aren't vectors availible in vhs?
<IfModule mod_mime.c>
...
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
...
</Ifmodule>
EDIT: I also tried the Fluid ViewHelper, but the SVG Image has height/width = 0:
<f:image src="uploads/tx_myext/{imgIcon}" width="50" height="50" class="xy" alt="Icon" />
EDIT 2: The ImagePath is correct. At Developer Tools I "see" the Image ..
EDIT 3: Oh, I see at my Filemanager (FAL) 0x0 pixels ..
Thanks merec.
Use SVG Images / TYPO3 6.2 with FluidTYPO3
Answer: Use
<img src="{f:uri.image(src: 'uploads/tx_myext/{imgIcon}')}">
instead of
<v:media.image src="uploads/tx_myext/{imgIcon}" alt="Icon" />
// OR
<f:image src="uploads/tx_myext/{imgIcon}" width="50" height="50" class="xy" alt="Icon" />

ImageMagick reading SVG with unexpected result

I have a question about IM reading SVG Images and it really troubles me.
For the SVG image below,
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#grad1)" stroke="blue"/>
</svg>
When I use identify -verbose sample.svg, I got the result with "Geometry: 1x1+0+0". But other people get "Geometry: 100x100+0+0". And seems 100x100 is correct. Why would this happen?
During my own experiments I have noticed that Imagick's default SVG delegate has problems handling SVGs that contain:
fill="url(#grad_or_imagepattern)"
As far as I am concerned, and explained here: http://www.imagemagick.org/discourse-server/viewtopic.php?f=3&t=23525, Imagick "can use its internal MSVG or the external delegate for RSVG or I believe Inkscape" if available.
I recommend you do the following in order:
1. uninstall Imagick
2. install Inscape
3. add Inscape directory to system path
4. install Imagick
In this way, Imagick will be able to ask Inscape to do the conversion.
All the best,

Resources