Responsive SVG to use as underline on heading tags in html - questions

[pumpkin]

Hello all,

I'm trying to use AD to create an SVG that I can use as an underline graphics on heading tags in html (like the headers here). When I copy the svg code they use, it works. Applied as a background to heading tags, the svg is responsive. It's width increases with the length of the heading text.

This is what their css svg code looks like:

background-image: url("data:image/svg+xml; utf8, <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' preserveAspectRatio='none' viewBox='0 0 531 18.9' style='enable-background:new 0 0 531 18.9;' xml:space='preserve'><path fill='%23f7bcbb' d='M530.5,11.4c-0.1-0.6-0.1-1.1-0.1-1.7c0-0.3,0-0.7,0-1c0-0.4,0-0.9-0.1-1.3c-0.2-0.5-0.2-1-0.2-1.5c0.3-0.9,0.5-1.9,0.6-2.9c0-0.8-4.9-2.5-8.7-2.4h-5.3c-0.1,0-0.4,0-3.7,0c-2.4,0-4.9,0-7.3,0s-4.7,0-7,0c-2.6,0-5.2,0-7.8-0.1l-4.7-0.1c-2.2,0-4.5,0-6.7-0.1c-2,0-4.1,0-6.1,0l-5.7-0.1c-4.8-0.1-98.3-0.1-103-0.2s-9.3,0-14,0c-6.5,0-13.1-0.1-19.6-0.1c-6,0-12.1,0-18.2,0c-3.4,0-6.8,0-10.2,0h-11.1c-4.5,0-8.9,0-13.4,0h-13.5h0.9c-6.1,0-12.3,0-18.4,0c-5.9,0-11.7,0.1-17.6,0.1c-3.7,0-7.5,0-11.2,0l-11.1,0.1c-7.9,0-15.7,0-23.6,0.1c-3.6,0-7.2,0.1-10.8,0.1s-7.3,0-10.9,0h-23.5h0.9c-6.1,0-12.1,0-18.2,0s-12,0.1-18,0.1H87.5c-4.2,0-8.3,0-12.5,0c-3.7,0-7.3,0.1-11,0.1H52.7c-3.8,0-7.6,0-11.4,0.1c-5.4,0-10.8,0-16.2-0.1l-8.4-0.1H13c-1,0-2.1,0-3.1,0H9.2C8,0.4,6.9,0.5,5.7,0.7C5,0.8,4.2,0.9,3.5,1.1C2.5,1.4,2.4,1.7,2.8,2l0,0L2.6,1.9V1.8C2.6,2.3,2.4,2.9,2.4,3.4c0,0.5-0.2,1-0.4,1.5C1.8,5.5,1.7,6,1.6,6.6C1.5,7.2,1.3,7.8,1.2,8.4C1,9.6,0.6,10.8,0.5,12c-0.1,1.2-0.3,2.2-0.4,3.2c-0.1,0.4,0.1,0.7,0.4,0.9c0.2,0.1,0.4,0.2,0.7,0.3c1.2,0.4,2.4,0.7,3.6,0.8c2,0.2,4,0.4,6.1,0.6s4,0.4,6.1,0.5c3.9,0.3,7.9,0.4,12.1,0.5c7.5,0.1,15.1,0,22.7-0.1L74,18.5c5.3,0,10.6,0,15.9,0c5.5,0,11,0,16.5,0.1c5.6,0,11.1,0,16.7,0s11.3-0.1,17-0.1c4.4,0,8.8-0.1,13.1,0c4.7,0,9.3,0,14,0c5,0,9.9,0,14.9,0.1l13.7,0.1c15,0.1,30.1-0.1,45.1,0c7.2,0.1,14.3,0.1,21.5,0.1c7.5-0.1,15-0.2,22.4-0.2c6.4,0,12.8,0,19.1,0c3.2,0,6.3,0,9.5,0s6.4,0.1,9.7,0.1c6.6,0,13.3,0,20,0c3.4,0,6.7,0,10.1,0c2.7,0,5.4-0.1,8.1-0.1c5,0,10,0,15,0l14.8-0.1c5.1,0,10.1,0,15.2,0c5.5,0,11,0,16.5,0c2.9,0,5.9,0,8.8,0s6,0,9.1,0s6.2,0,9.3-0.1c2.6,0,5.2-0.1,7.9-0.1c3.8,0,7.5,0,11.3,0c2.5,0,5.1,0.1,7.6,0.2c3,0.1,6,0.1,9,0.1s6.2,0,9.3-0.1c2.2,0,4.3-0.1,6.5-0.1c2.8,0,5.6,0,8.2-0.2c3.5-0.4,7-1,10.4-1.8c3.4-0.6,6.7-1.4,10-2.5c0.4-0.1,0.6-0.3,0.6-0.5c0,0,0-0.1,0-0.1c0.1-0.1,0.1-0.1,0.2-0.2C531.1,12.4,530.8,11.9,530.5,11.4z'/></svg>");

However, using SVGs I create with AD, this does not work. Even when I run the exported svg code through this url encoder for svg. 

Here's the SVG code from the AD file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 800 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M8,105C1.92,86.414 10.535,16.963 20,9C29.465,1.037 110.389,11.701 120,11C129.611,10.299 227.02,13.869 310,8C378.465,3.157 438.379,10.522 497,14C555.621,17.478 766.706,-1.829 779,9C791.294,19.829 766.403,27.139 784,60C789.251,69.807 797.394,84.177 794,97C790.606,109.823 729.554,115.224 697,114C664.446,112.776 428.144,119.487 385,112C341.856,104.513 214.68,115.883 152,112C89.32,108.117 11.387,115.354 8,105Z" style="fill:#2176ae;"/></svg>

 And here what I get after running it through the url encoder:

background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 800 120' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M8,105C1.92,86.414 10.535,16.963 20,9C29.465,1.037 110.389,11.701 120,11C129.611,10.299 227.02,13.869 310,8C378.465,3.157 438.379,10.522 497,14C555.621,17.478 766.706,-1.829 779,9C791.294,19.829 766.403,27.139 784,60C789.251,69.807 797.394,84.177 794,97C790.606,109.823 729.554,115.224 697,114C664.446,112.776 428.144,119.487 385,112C341.856,104.513 214.68,115.883 152,112C89.32,108.117 11.387,115.354 8,105Z' style='fill:%232176ae;'/%3E%3C/svg%3E");

Does anyone have an idea what I'd need to do, to make my svg responsive like on the website I linked? 

[v_kyr]

Hi and welcome,

compare the above generated SVG strings and check for differences, like viewBox (width/height) and style settings. Adapt/edit the by Affinity generated SVG code accordingly, pass it through that URL-encoder and retry.

background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 120' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='enable-background:new 0 0 800 120;'%3E%3Cpath d='M8,105C1.92,86.414 10.535,16.963 20,9C29.465,1.037 110.389,11.701 120,11C129.611,10.299 227.02,13.869 310,8C378.465,3.157 438.379,10.522 497,14C555.621,17.478 766.706,-1.829 779,9C791.294,19.829 766.403,27.139 784,60C789.251,69.807 797.394,84.177 794,97C790.606,109.823 729.554,115.224 697,114C664.446,112.776 428.144,119.487 385,112C341.856,104.513 214.68,115.883 152,112C89.32,108.117 11.387,115.354 8,105Z' style='fill:%232176ae;'/%3E%3C/svg%3E");

 

[pumpkin]

Thanks for taking the time to answer. After searching the web for a day or two, I finally came to a forum where someone had a similar issue and solved it by adding 

preserveAspectRatio='none'

into the SVG code. That indeed solves my issue so far. Works for what I am doing now, but might not work on SVGs that look rather odd when stretched horizontally.

[v_kyr]

11 minutes ago, pumpkin said:

Thanks for taking the time to answer. After searching the web for a day or two, I finally came to a forum where someone had a similar issue and solved it by adding 

preserveAspectRatio='none'

into the SVG code. That indeed solves my issue so far. Works for what I am doing now, but might not work on SVGs that look rather odd when stretched horizontally.

Makes sense for a responsive line in your case though.

Quote

preserveAspectRatio="none"
Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. Note that if <align> is none, then the optional <meetOrSlice> value is ignored.

• SVG Attribute Reference:  preserveAspectRatio

[David in Яuislip]

 

22 hours ago, pumpkin said:

Here's the SVG code from the AD file:

I just used your AD svg code to replace the path, colour and viewbox data in the example that worked and it was fine. Only thing to watch is the nested quotes so I changed the AD doubles to singles
I've been down this url converter route before and concluded it's a waste of time which just makes the file larger. Within the url definition you only need to change a hash # into %23
I've also removed some surplus stuff from the .ad class in the attached file i.e.
version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' style='enable-background:new 0 0 531 18.9;' xml:space='preserve'
is all redundant

Great fun this <svg> xml!

underline.html