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>
10
  • 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 Mar 14, 2016 at 17:27
  • 2
    Why are you trying to render this in SVG anyway? Why not as plain text? Mar 14, 2016 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, 2016 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 :) Mar 14, 2016 at 17:36
  • 1
    Convert the text to outlines before exporting the SVG
    – Cai
    Mar 14, 2016 at 18:15

2 Answers 2

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

7
  • 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, 2016 at 18:36
  • @cyonder Right, as mentioned in this answer the easiest way is as he suggests :) Mar 14, 2016 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, 2016 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 Mar 14, 2016 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, 2016 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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