What is the best way to ensure an image stretches to the size of an SVG path?

I would like to include the image (test.svg) inside another SVG so that it can scale to fill a specified area.

test.svg

<svg viewBox="0 0 2911 2521" xmlns="w3.org/2000/svg">
  <path d="m0 0h2911v2521h-2911z"/>
  <path d="m204.5 367h2502v1787h-2502z" fill="#fff"/>
  <circle cx="1455.5" cy="1260.5" fill="#c00" r="468"/>
</svg>

HTML

<div class="board">
  <svg viewBox="0 0 2500 1250" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="test" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1">
        <image href="test.svg" x="0" y="0" width="1" height="1" />
      </pattern>
      <clipPath id="hex">
        <path d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      </clipPath>
    </defs>
    <style>
      #h13 {fill: url(#test);}
    </style>
    <g id="parent" stroke="#50731b" stroke-width="20">
      <path id="h13" d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      <path id="h22" d="m376 741   211-365h422l211 365-211 365h-422z"/>
      <path id="h24" d="m1641 741  211-365h422l211 365-211 365h-422z"/>
    </g>
  </svg>
</div>

The provided code generates this output:

https://i.sstatic.net/bFTMG.png

However, my goal is for it to resemble this:

https://i.sstatic.net/UJjsV.png

htmlcsssvg

Answer №1

In order to customize an element with a specific class name, you can simply assign the class name selected to the desired path element.

For better organization, I recommend dividing your design into two layers: the background layer containing images, and the foreground layer with hex shapes (which can also be hexagonal). You can place a hex shape at x=0, y=0 and use it as a universal clip-path for all background images. In this example, I have added a blue-colored image as the background of path id="13", masked with a clip-path that matches the hex shape.

To handle interactions, I set up an event listener for the parent element (g element with id="parent") and check if the correct element has been clicked on. Currently, the opacity is taking precedence over the red fill, but you can modify this as needed.

let parent = document.getElementById('parent');

parent.addEventListener('click', e => {
  if(e.target.nodeName == 'path'){
    // this is a hex
    e.target.classList.add('selected');
  }
});
<div class="board">
  <svg viewBox="0 0 3400 3673" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="hex">
        <path d="m1278 376  211-365h422l211 365-211 365h-422z"/>
      </clipPath>
    </defs>
    <style>
      g#parent path {fill: #bbb}
      path.selected {fill: red}
      path.selected {opacity: 0}
    </style>
    <g id="images">
      <image id="img13" x="1200" y="0" height="1000" width="1000" clip-path="url(#hex)" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KPHJlY3QgZmlsbD0iYmx1ZSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHg9IjAiIHk9IjAiLz4KPC9zdmc+"/> 
    </g>
    <g id="parent" stroke="#fff" stroke-width="20">
      <path id="13" d="m1278 376  211-365h422l211 365-211 365h-422z"/>
      <path id="22" d="m646 741   211-365h422l211 365-211 365h-422z"/>
      <path id="24" d="m1911 741  211-365h422l211 365-211 365h-422z"/>
      <path id="31" d="m14 1106   211-365h422l211 365-211 365h-422z"/>
      <path id="33" d="m1278 1106 211-365h422l211 365-211 365h-422z"/>
      <path id="35" d="m2543 1106 211-365h422l211 365-211 365h-422z"/>
      <path id="42" d="m646 1471  211-365h422l211 365-211 365h-422z"/>
      <path id="44" d="m1911 1471 211-365h422l211 365-211 365h-422z"/>
      <path id="51" d="m14 1836   211-365h422l211 365-211 365h-422z"/>
      <path id="53" d="m1278 1836 211-365h422l211 365-211 365h-422z"/>
      <path id="55" d="m2543 1836 211-365h422l211 365-211 365h-422z"/>
      <path id="62" d="m646 2201  211-365h422l211 365-211 365h-422z"/>
      <path id="64" d="m1911 2201 211-365h422l211 365-211 365h-422z"/>
      <path id="71" d="m14 2566   211-365h422l211 365-211 365h-422z"/>
      <path id="73" d="m1278 2566 211-365h422l211 365-211 365h-422z"/>
      <path id="75" d="m2543 2566 211-365h422l211 365-211 365h-422z"/>
      <path id="82" d="m646 2932  211-365h422l211 365-211 365h-422z"/>
      <path id="84" d="m1911 2932 211-365h422l211 365-211 365h-422z"/>
      <path id="93" d="m1278 3297 211-365h422l211 365-211 365h-422z"/>
    </g>
  </svg>
</div>

Answer №2

To make the necessary adjustments for your test.svg file, you should switch the patternUnits to objectBoundingBox and set a patternContentUnits to objectBoundingBox. Furthermore, include preserveAspectRatio/slice in your SVG if you wish to maintain the original aspect ratio while adapting the image to the smaller dimension of the viewport. Below is an example with your test.svg transformed into a symbol.

(Please note that this representation may not be an exact match to the provided sample image as it does not feature black borders on the left and right sides. If you desire these borders, you will need to incorporate them within the test-svg.)

<div class="board">
  <svg viewBox="0 0 2500 1250" xmlns="http://www.w3.org/2000/svg">
    <defs>
      
<symbol id="test-symbol" viewBox="0 0 2911 2521" preserveAspectRatio="xMidYMid slice">
  <path d="m0 0h2911v2521h-2911z"/>
  <path d="m204.5 367h2502v1787h-2502z" fill="#fff"/>
  <circle cx="1455.5" cy="1260.5" fill="#c00" r="468"/>
</symbol>
      
      <pattern id="test" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#test-symbol" x="0" y="0" width="1" height="1" />
      </pattern>
      <clipPath id="hex">
        <path d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      </clipPath>
    </defs>
    <style>
      #h13 {fill: url(#test);}
    </style>
    <g id="parent" stroke="#50731b" stroke-width="20">
      <path id="h13" d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      <path id="h22" d="m376 741   211-365h422l211 365-211 365h-422z"/>
      <path id="h24" d="m1641 741  211-365h422l211 365-211 365h-422z"/>
    </g>
  </svg>
</div>

Answer №3

After placing the background within a rectangle with the same dimensions as the forefront and matching viewBox, everything fell into place smoothly:

Explore my CODE PEN PROJECT featuring the background as an external file <<<

Kindly note that the image below serves as reference for the method usage.

Simply copy it into a blank document and save it as test.svg.

You can then delete it and remove the use element from the equation.

Finally, link the test.svg file from wherever you choose to store it.

The image element with the href pointing to test.svg is concealed within a group, right under the first group in the svg.

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>by Lancelot Pierre Blaine</title>
<style>
</style>
</head>
<body>
<div style="width: 50%; height: 50%;">
<svg id="eff7db96-7c1d-4982-bd80-61bad4582a97" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="185" height="158" viewBox="0 0 185 158" style="width: 100%; height: 100%;">
<defs>
<style>
.a24aad19-bdcd-4532-8371-4f54dd27ccbb, .b83eb350-0558-4ca5-ae05-cca66b3d1863 {
fill: none;
}

.bbfd3ba8-bb9b-40e4-97f5-d0e2ca578bf5 {
fill: #6c942e;
}
...
...
... (SVG code continues)

Process Summary:

  • Traced the PNG image from your post using Adobe Illustrator

  • Scaled the background correctly

  • Created a new SVG called test.svg

  • Enclosed the design in a rectangle for alignment

  • Developed an HTML document using styling for the SVG element

  • Pasted both AI-exported designs as SVG codes within the HTML editor

  • Also constructed a test.svg containing only the background

  • Successfully linked the files without utilizing the use method

  • Inserted comments under the main SVG element within the group for enhanced manageability

  • Additionally, created a CodePen project with file linkage and excluded the use element

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why won't my button's text resize?

I am facing an issue with my button's CSS code. In Chrome, when I resize the window to view the mobile layout, the text overflows outside of the div. a.syntra-green-button { background-color: #6faf3c; border: 1px solid #9dcc77; color: w ...

htmlcssgrid-layout

What is the best way to make a linear gradient that spans the entire vertical space that is visible (or shifts to a solid color)?

I'm trying to figure out how to apply a linear gradient to the body element of my webpage. Here's the CSS code I've been using: body { background: linear-gradient(0deg, white, lightgray); } The issue I'm facing is that the gradien ...

csshtmllinear-gradients

Are you attempting to modify the alignment of the setText() function?

I've been attempting to adjust the alignment of the "setText" method in a "TextView". Specifically, on my emulator, I'm trying to set the text alignment using the "setText" method. Unfortunately, I haven't been successful in accomplishing th ...

javaandroidcss

What is the best way to place an image above a step progress bar?

I need assistance with adding an image or icon above each step in the progress bar. I attempted to insert an image tag, but it ended up next to 'step 1', which is not the desired outcome. .progressbar { counter-reset: step; } .progressbar li ...

htmlcssbootstrap-4

Automatically move to the following input field once one character is entered into a disabled input field

Hey there! I am interested in creating an Auto tab feature that moves to the next input field after entering 4 characters. Additionally, I want it to skip disabled fields and move to the next enabled one. How are you all doing with these questions? Auto t ...

javascriptjqueryhtmlcss

Issue with PHP's ng-click not functioning properly with Angular JS's dynamic HTML generation

I'm just starting out with Angular JS. I'm trying to create an ng-click event in dynamically generated HTML from PHP, here's the code snippet. var app = angular.module('pageapp',[]); angular.module('pageapp') .filter(& ...

javascriptphphtmlangularjs

The navigation bar's icons are not displaying correctly in Bootstrap

I'm working on building a navigation bar using Bootstrap, but I'm facing an issue with the home icon not displaying correctly. It's not aligned properly and doesn't flow seamlessly with the rest of the list items. Can someone please ass ...

htmlcsstwitter-bootstrap

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

Column count pseudo class is malfunctioning on Safari browser

Why is the pseudo class with column count not working in the Safari browser? I have captured two screenshots to illustrate this issue. 1. Firefox browser screenshot https://i.sstatic.net/27uoI.png 2. Safari browser screenshot https://i.sstatic.net/vRN ...

htmlcssbrowsersafaricolumn-count

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...

javascripthtmlcssdom

Is there a way to incorporate text fields and input in BootstrapDialog?

Is it possible to include text fields and inputs within this modal using BootstrapDialog without modifying the library? Additionally, can I use $.ajax() inside? <button class="btn btn-primary" id="add_item">New item</button> jquery $('# ...

jqueryhtmlajaxbootstrap-dialog

Is HTML5 supported by IBM Worklight's MBS?

I'm having issues with my mobile browser simulator not recognizing certain HTML5 elements such as input date type, placeholder, localstorage, sessionStorage, and Video tags. Should I make any changes to fix this problem? ...

htmlibm-mobilefirstworklight-mbs

Issue with Bootstrap 4.x tooltip positioning within an overflowing container

In the world of bootstap 4.x, a tooltip finds itself in a bit of a pickle when nestled within a parent element sporting an overflow property. Whether it's overflow: auto; or overflow: scroll;, the poor tooltip just can't seem to find its place. T ...

javascriptcsstwitter-bootstrapbootstrap-4tooltip

What is the best way to format text into 2 lines on both Internet Explorer and Firefox?

I'm trying to wrap the text in two lines. When I use the following code on Google Chrome: overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; white-space: normal; However, this code ...

htmlcssfirefoxinternet-explorer-11

Validate the presence of `<HTML>`, `<HEAD>`, and `<BODY>` tags using JSoup

Hello there! I've been using JSoup to parse through an HTML file, and I've encountered a situation where I need to verify if the file contains certain tags. Here's the code snippet I'm currently working with: htmlDom = parser.parse("&l ...

javahtmldomjsouphtml-parser

Get notified via email when submitting a form on a PHP contact form

I am a front-end developer and do not have experience with PHP. I am trying to set up a contact form on my website using an example from htmldog. Here is the current code snippet: <form action="contact.php" method="post"> <div class="c ...

phphtmlemailpost

Troubleshooting problem with ngb carousel timing interval

I am currently developing a web app for selecting maps in Escape from Tarkov. To enhance the visual appeal of the app, I decided to incorporate an ngb-carousel feature for a smooth animation effect. However, I have encountered a problem where the slides ar ...

htmlangularjsangularbootstrap-4

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

I've been trying to display the daily verse from ourmanna.com API using a combination of HTML and JS code, but I'm encountering an issue where the verse doesn't always show up. I'm not sure if this problem is on the side of their API or ...

javascripthtmlapi

Can JavaScript be used to change the style and make a hidden input field vanish from view?

Currently, I am designing a table containing dates along with numerous hidden fields. print "<td"; { $dm=date('Y-m-d',strtotime("+".$i." days", strtotime($m))); print " class=\"overflow\" id=\"$a::$dm\" onclick=\" ...

javascriptcsshidden-field