SVG text cross-browser compatibility issue

Question

First of all, I have to say that I am not good at Illustrator. I just make some basic graphics for the websites that I am working on.

Here is one that I made:

I exported as SVG format and put it into a website. But when I change size of browser, the text size increases or decreases.

This is how it looks like on a web page in Chrome:

If I increase the size of browser, letters are coming into rectangle:

I never had such a problem. It's so weird and I wasn't able to find a solution for this.

Also, in Safari everything works perfectly.

In Firefox, this is how it looks like:

The text is completely different. Can you you tell me what's happening? Aren't SVG graphics just like images? Why am I having so many problems?

Here's the SVG code for reference:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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" viewBox="0 0 821.4 353.7" enable-background="new 0 0 821.4 353.7" xml:space="preserve">
  <rect x="0" y="0" opacity="0.8" width="682.3" height="214.5" />
  <text transform="matrix(0.8101 0 0 1 25.8074 165.8717)">
    <tspan x="0" y="0" fill="#307FB7" font-family="'MyriadPro-Regular'" font-size="196.5103" letter-spacing="28.4">C</tspan>
    <tspan x="143.4" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="196.5103" letter-spacing="28.4">agdas</tspan>
  </text>
  <rect x="139.2" y="138.7" opacity="0.8" width="682.3" height="214.5" />
  <text transform="matrix(0.8101 0 0 1 170.9687 304.5814)" opacity="0.8">
    <tspan x="0" y="0" fill="#307FB7" font-family="'MyriadPro-Regular'" font-size="196.5103" letter-spacing="28.4">Y</tspan>
    <tspan x="135.8" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="196.5103" letter-spacing="28.4">onder</tspan>
  </text>
</svg>

Answer 1

The problem is that the SVG is using text as opposed to paths, the browser is then rendering that text with its own text rendering engine, which can lead to inconsistencies with font naming and scaling (the same as regular HTML & CSS text)

One solution is to outline the text before exporting the SVG.

Either right click the text and Create Outlines or go to Object -> Expand

Answer 2

The problem is that your SVG letter spacing is not being changed based on the screen size like the other parts. Since the rectangles aren't themselves related to the text, they are just positioned behind them, they don't contain the text well.

The easiest solution would be to export the SVG as a path instead of as text, but that is not a perfect solution because it prevents users from selecting the text.

If you want users to retain that ability, there is very likely a way to fix your SVG while retaining it as text, but since you're only dealing with text and some rectangles and you're making it for a website, I recommend you use plain HTML + CSS to re-create this.

The only catch is that you'll have to host Myriad Pro yourself or use it from Typekit because it's not free by default. You can use an alternative font, I use PT sans if it's not supported below.

HTML:

<div class="site-title-container">
    <h1 class="site-title first-line"><span>C</span>agdas</h1>
    <h1 class="site-title second-line"><span>Y</span>onder</h1>
</div>

CSS:

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

/* For demo only - not recommended */
body { font-size: 2vw; }
/* End of demo only section */


.site-title-container {
    font-family: "Myriad Pro", 'PT Sans', sans-serif;
}
.site-title {
    position: relative;
    color: white;
    padding: 0.3em 0.7em;
    display: inline-block;
    font-size: 2.5em;
    letter-spacing: 0.2em;
}
.site-title span {
    color: #3580B9;
}
.site-title.first-line::before {
    content: '';
    background-color: #161616;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.site-title.second-line {
    position: absolute;
    top: 1.1em;
    left: 1em;
    background-color: #161616;
    z-index: -1;
}

Demo link