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.

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?