0

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: enter image description here

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: enter image description here

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

enter image description here

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:

enter image description here

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>
  • 2
    Can we see the exported SVG code? My guess is that the SVG is rendering it as text, thus the font it's using doesn't show up FireFox and causes the discrepancies between browsers – Zach Saucier Mar 14 '16 at 17:27
  • 2
    Why are you trying to render this in SVG anyway? Why not as plain text? – Zach Saucier Mar 14 '16 at 17:29
  • SVG look like exactly as It shows in the first image that I shared in the question. Also, I am using illustrator with the same logic I use photoshop. I don't know what you mean by render. Here is the link for SVG file: uploaded.net/file/35c5858j – cyonder Mar 14 '16 at 17:34
  • Please use a service like Pastebin to share the SVG code or put it in the question itself. I don't want to download a file I don't know what's in it :) – Zach Saucier Mar 14 '16 at 17:36
  • 1
    Convert the text to outlines before exporting the SVG – Cai Mar 14 '16 at 18:15
2

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

1

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

  • Zach, thank you for your work but @CAI told me the way to fix this in the comment section. But I up-voted this answer as thank you. – cyonder Mar 14 '16 at 18:36
  • @cyonder Right, as mentioned in this answer the easiest way is as he suggests :) – Zach Saucier Mar 14 '16 at 18:38
  • @Zach you don't always want the text to be selectable. For a logo for example, path accuracy is a lot more important than having selectable text. – Cai Mar 14 '16 at 18:39
  • @CAI I can't think of a situation where you wouldn't want the text to be selectable. Yes, accuracy is more important, but one can be accurate while retaining selection if done properly – Zach Saucier Mar 14 '16 at 18:46
  • There is no way to be 100% accurate using text/CSS. Would you suggest every company replace the logotype on their website with a font and CSS? I certainly wouldn't. – Cai Mar 14 '16 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.