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.
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>