: SVG text cross-browser compatibility issue 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

@Turnbaugh909

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

Vote Up Vote Down

@Murphy569

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

Vote Up Vote Down