-1

I added an SVG graphic to my client's Wordpress website. However, there are strange spaces in the graphic...letters bunched together and in some cases, large spaces between letters. To be honest, I don't know a lot of about SVG files other than they scale well. The problem only seems to affect text. Any thoughts on why this is happening?

enter image description here

user1074239
  • 33
  • 1
  • 6
  • 1
    Can you post or link the source code of your SVG file, or at least an excerpt? – ccprog Jun 23 '17 at 18:42
  • There isn't any source code. I just added it to the Wordpress website like any other graphic. Here's a link to the website: www.johnandersonlaw.com. Thanks for looking at it. – user1074239 Jun 23 '17 at 21:52

1 Answers1

0

First, to make things a bit more understandable: The SVG file format is a XML dialect, just like HTML. You can open and edit it in any text editor, or produce it dynamically with PHP. It shares a lot of characteristics with HTML, for example the use of stylesheets. If an SVG file wants to display text, it has to use either the installed system fonts, or webfonts need to be referenced in its stylsheets.

And that is what happens here: your SVG file needs to use the webfont Lato, but it isn't properly referenced. Thus, a replacement font is used, and some letter positioning tweaks defined in the SVG don't work anymore.

The webfont is in fact referenced in the main website, but the SVG file has no access to that definition. Their stylesheets are isolated from each other.

To fix this, I'll give you two solutions. Choose the one you feel comfortable with.

1. Write the SVG file inline into the web page

The source code of the SVG file can be - more or less unchanged - written into the middle of an HTML file. Done this way, the SVG content has access to the page's stylesheets and thus the webfonts.

Mind you, all stylesheets apply, so it might happen that due to a unfortunate naming conflict some aspects of the SVG content may change their appearence. Frankly, you'll have to try it out.

To achieve the inline embedding, fortunately there are Worpress plugins. A quick search revealed SVG Support, but there may be others. With this plugin, you would just add a class style-svg to your image tag, and the plugin would swapp it for the inline SVG content. Be aware that I haven't tested it.

2. Add the webfont to the SVG file

For that, you'll have to open the SVG file in an editor of your choice. Unfortunately, the file is somewhat compacted and is written without any newlines. If it was written prettified, the first few lines would look like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 287.76 187.31" />
  <defs>
   <style>...</style>
 </defs>

Add the following just after the opening <defs> tag and before the <style> tag:

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic&#038;subset=latin,latin-ext" type="text/css" />
ccprog
  • 20,308
  • 4
  • 27
  • 44