How to add an external source in an SVG?

Question

How to add an external source in an SVG?

Navigation

#1 by (5 votes)

4

I have a logo that I made in SVG , in file .svg external, which uses a text with the name of the company, whose source is Open Sans Light .

On my machine it works normally, due to the fact that I have the font installed.

I have this source on my site through Google Fonts , however, I believe that because SVG is being loaded externally through the background-image property, that font is not working.

How do I declare this external source within SVG? Is there any way to do this ...

For example, how could I do this in SVG below?

<svg width="200" height="200">
   <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />
   <text y="105" x="85" style="font-family: 'Open Sans'; font-size: 20px; font-weight: bold;">
     <tspan>Text</tspan>
   </text>
 </svg>

Note : Although my example is in HTML, I'm using an external SVG file.

html css svg font

asked by anonymous 22.11.2017 / 13:38

1 answer

How to make an error message for this situation? What is the command using * ngIf to do a larger and smaller check

score 5 · Accepted Answer

SVG has support for CSS, of course with some different properties for the elements, in this case you can use @font-face and you will achieve the desired one, for example:

  <style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>

A test:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>
   <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />
   <text y="105" x="85" style="font-family: 'Open Sans'; font-size: 20px; font-weight: bold;">
     <tspan>Text</tspan>
   </text>
 </svg>

However I must say that using <text> in SVG is not something interesting, only when it is "dynamic" would be interesting, so if you can vector it do so, besides loading less the performance will be a bit better download as well as rendering).

Extra

Note that the SVG tags exist (exist):

<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<font-face>

However they are deprecated (they are obsolete).

How to vectorize text in Inkscape

Select the text without the group (in the footer as in the image, Text or Text should appear, if you see something else, you did not select <text> ) :

Then go to the top menu and select Path > Ctrl + C )

How to vectorize text Adobe Illustrator CC

I do not know how to do it in other versions, it may work in older or not, please comment

Select the text and then on the menu select Type > Create outlines