Placing div with content within SVG vector? : web_design

By Prosyscom
In March 14, 2018


I would very much like other web designers opinion on how to place content within the bounds of a SVG graphic. I have googled for similar questions, but have not found anything to get me in the right direction. I’m very new to utilizing vector graphics, so there might be a much simpler solution…

Here’s an illustration of what I’m trying to achieve:

My first instinct was to separate the left, top, and right side of the vector and export these as different SVG files. Then do something similar to:

<div class="container">
 <svg class="left-side"></svg>
 <svg class="top"></svg>
 <svg class="right-side"></svg>
 <div class="content"></div>

And then I used CSS absolute positioning to position the SVG elements relative to their container. Although this made it very difficult to position the different parts in a predictable way, especially when my site is suppose to be responsive.

My question is there any better way of doing it? And if so how? Any help is highly appreciated!

قالب وردپرس