I have a logo (created in .ai) in the middle of a page (in the background). It is placed in a div that’s set to Absolute/Full so the logo stretches automatically.
How can I make it so that the lines don’t scale and don’t get thicker as the logo stretches?
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
hi @Rapha here are some sources to read.
Hi Stan,
Thank you for the links/resources!
I came across the vector-effect="non-scaling-stroke"
property before also, but I don’t know how I would apply this (and where).
Would I apply it to a class I give the vector .svg logo or it’s parent div and add it to an embed (or page-wide) code?
Would that be sufficient?
Or do I, in addition to that, also need the transform="translate.." property? What exactly does that and how does it work?
It is meant for a client logo that I opened in Illustrator and saved as an .svg (grouped) – it sits in the background of a (growing) list. I basically use it on the page like a picture. I can’t possibly re-construct the logo in WF. I need to use the original.
HI @Rapha as you can see from articles vector-effect="non-scaling-stroke"is part of SVG. You can add it manually when open SVG in code editor.
Thank you, Stan.
Sorry but I came here to Webflow based on the promise of it being a no-code application. What I mean is I have a rather basic knowledge of HTML and CSS but I’m willing to learn Javascript. Right now I still need a bit more specific instructions for certain things to understand.
So please bear with me.
You’re saying that I can add the code manually when I open the SVG in a code editor, correct?
I just opened the file in an online code editor. It looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 290 290" style="enable-background:new 0 0 290 290;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2E2E2E;}
</style>
<path class="st0" d="M145,1C65.6,1,1,65.6,1,145s64.6,144,144,144s144-64.6,144-144S224.4,1,145,1z M280.8,145
c0,8.4-0.8,16.7-2.3,24.9h-8.6c-13.8,29.3-48.7,41.9-78,28.1c-29.3-13.8-41.9-48.7-28.1-78c13.8-29.3,48.7-41.9,78-28.1
c12.4,5.8,22.3,15.8,28.1,28.1h8.6C280,128.3,280.8,136.6,280.8,145z M145,9.2c66,0,121.1,47.3,133.3,109.8
c-14.3-33.9-53.5-49.9-87.4-35.5c-22.2,9.4-37.6,30-40.3,53.9V79.5h-8.5v57.9c-4.2-36.6-37.3-62.9-73.9-58.7
c-31,3.6-55.5,28.2-58.8,59.2C13.1,66.3,72.5,9.2,145,9.2z M134.4,145c0,32.4-26.3,58.6-58.6,58.6S17.1,177.4,17.1,145
s26.3-58.6,58.6-58.6l0,0C108.1,86.4,134.4,112.6,134.4,145z M145,280.8c-72.5,0-131.9-57.1-135.6-128.7
c3.9,36.7,36.8,63.2,73.4,59.3c31.1-3.3,55.7-27.7,59.2-58.8v57.9h8.5v-57.9c4.2,36.6,37.2,62.9,73.8,58.8
c23.9-2.7,44.6-18.1,53.9-40.3C266.1,233.5,211,280.8,145,280.8z"/>
</svg>
So where do I add vector-effect="non-scaling-stroke"? Anywhere within the style tags?
I’m assuming that, after adding that line, I save the file and replace the logo in Webflow with that file (just like uploading an image). And that should do the trick? Or do I need to add code in Webflow as well?
I have an additional question (I’m learning…):
Looking at the svg code, what does the text/css property within the style tags do? Are they just defining that document is a CSS text file, or are the vectors and lines in an svg handled like text?
I guess .st0 is the path class, which has the color E2 applied to it, and the numbers following within the path tags are coordinates that define the shape/placement of the paths which make up the shape…?
hi @Rapha first thing first. When you creating vector object let say circle in graphical software you can choose if stroke will follow size of object. I would not show you where and how as I do not use Adobe products.
If you need to add it to SVG later it has to be added to each path. If you create rectangle your path will start with <rect ...> If you will have bunch of custom shapes each path (shape) will start with <path ...> So as you can read from articles I have posted vector-effect="non-scaling-stroke" has to be applied on path. Hope that clears for you where to apply this attribute.
To your additional question these are basic of HTML that are very well described in many articles or in HTML documentation. Simply said when you add attribute type with value text/css type="text/css" you explicitly giving note to compiler that code between HTML tags <style>...</style> compiler should expect is CSS. It is not necessary to add it as modern browsers recognise that <style>...</style> is used for CSS. You may add it but you do not have to. IN your example it was generated by Adobe to keep compatibility with old browsers.
Hope that these simple answers will help you to understand and if you need more information feel free to use your favourite browser as internet is overloaded with great sources of any topic you need to know more. 
Thanks so much, Stan!
I researched some more and edited the code of the svg. file as follows:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
width="290px" height="290px" viewBox="0 0 290 290" style="enable-background:new 0 0 290 290;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
</style>
<circle vector-effect="non-scaling-stroke" class="st0" cx="145" cy="145" r="140"/>
<circle vector-effect="non-scaling-stroke" class="st0" cx="75.5" cy="145.4" r="65.1"/>
<line vector-effect="non-scaling-stroke" class="st0" x1="146.2" y1="79.1" x2="146.2" y2="210.9"/>
<path vector-effect="non-scaling-stroke" class="st0" d="M276.6,119.6c-14.3-33-52.6-48.1-85.6-33.9s-48.1,52.6-33.9,85.6
c14.3,33,52.6,48.1,85.6,33.9c15.5-6.7,27.7-19.1,34.2-34.7"/>
</svg>
In code-pen it worked as desired but not when replacing the .sgv in WF (replacing the “image” with the .svg file with the updated code as shown above).
It made it actually worse!
The lines were much thicker to begin with and they scaled proportionally – both the opposite of what I’m trying to achieve here.
Unfortunately I have to give up on this. I can’t afford spending more time fiddling with code (and its implementation in WF) for this project when I’m obviously not smart enough to fully understand how to work with your suggestions.
I’ll use a transparent .png. file and live with the stroke being scaled for now.
I thought I understood. But it looks more like I may need to invest more time to learn about the code/options behind .svg files and their implementation in Webflow.
I’ll have to add this to all the other time-consuming issues I had along the way with learning and working with WF. For me it amounts to a huge question-mark behind Webflow’s promise of “no-code”.
Or maybe I have to add a question mark behind my abilities and the way I approach Webflow and what I expect from it…? Not sure right now. I may have to wait until frustration dissolves.
Thanks nevertheless, Stan and anyone else here in this forum who trie(s) to help WF novices like me.
you can just add class to your SVG (in code) and after use CSS (in custom code) to do with SVG what you need. Know how to with SVG need a bit of time to learn and understand all features of SVG. I do not work with SVG’s on daily basis and I always need refresher from my snippets or internet.
The biggest issue I have personally is limit of WF embed element to 10.000 characters. This limitation makes it totally useless if you would like to use it for SVG that is not rectangle or circle.
you may read
but there are some other great resources.
Good luck 