SVG exported from Inkscape are rendered with different font - svg

I have opened a pdf with Inkscape and exported it in Plain SVG. However, when I open it in any browser the text is rendered with a different font.

This happens because the font-family property in the SVG file might be set to a font that is not installed on the system. In my case it was DejaVuSans.
You should open the SVG file in a text editor and replace all font-family:DejaVuSans with for example font-family:Arial.

Related

Embed svg icon as external file link in adobe illustrator

I would like to link icons into svg as external source.
The reason is that I change this images on client side with javascript.
If icons are jpg or png or similar, I can click "Link" checkbox when place external file. But my icons are in svg format. And checxbox is disabled when I would like to place the svg as external link. I need to have icons as svg since I change also color on the client side(beside different icon).
How can I embed svg icon as external file?
I didn't find a way to do this with adobe illustrator. The workaround is to link to some jpg and then open svg file in notepad and replace external jpg link to external svg link. This way it works.

SVG font family selection

We are using Myriad Pro in an SVG file which is output from Adobe Illustrator. If we use Myriad Pro and set it to Italic in the Illustrator file, the SVG output sets the font-family name of a text element to 'MyriadPro-IT', the filename of the font file, instead of <text font-family='Myriad Pro' font-style='italic'>Hello World</text>.
Any ideas of either having browsers understand that the font-family is a file name on the local system (or... sub font? Not familiar with the terminology here).
Thanks!

SVG file looks different in webbrowser than in Illustrator

I've been doing some stuff in Illustrator and I have a problem with saving a project in to SVG file that I open in webbrowser, It just looks different.
And it hapens only in SVG, if I save it to PDF or PNG it looks how it should.
What am I doing wrong?
That's how it looks in Ai
That's how it looks in webbrowser
Here's a link to download rar file with .ai and .svg that I have.
Since all browsers render it the same way, it would seem likely that this is a bug in the AI SVG export filter.
To me it looks like you are applying a blend mode ("Overlay" perhaps?) to the white parts on top of the image. That effect ought to be reproducible using SVG filters, but perhaps AI's exporter doesn't support that yet.
If you are using an "odd" blend mode, try changing it, or reproducing the effect another way.
Individual pixel control needed in identical svg conversion is not possible. SVG creates only specific shapes. The Ai app conversion seems to use opacity to provide the color shades. You could probably tweek opacity and add some svg filters to improve the svg.
Print your design in a . pdf file instead of exporting it directly. Then open the printed .pdf back in Illustrator and export the .svg from this one, it shoud do the trick.

OpenModelica svg icon for blocks

The svg icon of a block is not displayed. Here's how I set it:
I switch to Icon view
Click on Bitmap
Draw a rectangle
In Bitmap properties I select the svg file through Browse (the option for svgs exists). The svg file is in the same folder as the .mo file.
Click Ok and the svg icon is not displayed - I get nothing (like a white icon - I can only see the corners of the bitmap rectangle). The svg file was created in Inkscape and saved as Plain svg.
Is this svg icon option not implemented yet but will be in the near future? or am I doing something wrong?
The svg option was there by mistake. The supported formats for bitmap are PNG, BMP and JPEG. I have fixed it now in r18662.
Adeel.

ImageMagick convert SVG with text and external fonts to SVG with shapes (outlines) with no external fonts

I'm looking to to use ImageMagick to convert an SVG file with text and external fonts to another svg without text, instead have them be shapes or outlines.
Basically, can ImageMagick do the equivalent of Illustrator's "Create Outlines" functions?
I can currently convert the svg to png and all the text and fonts render correctly, but I'm just looking to remove need for the person opening the svg to have the correct fonts installed on their computer.
I believe that your installation of ImageMagick needs to be configured with the the "--with-autotrace" switch and Autotrace needs to be installed. Then a simple conversion command should work:
convert text.png vector.svg
I doubt ImageMagick will do it. What you need to do is load the SVG into an editor like Inkscape. Select the text and then convert it using Path->Object to Path.
Then you can save it and you can distribute it without worrying about the user not having the fonts.

Resources