SVG Test: foreignObject

Using SVG to Create Responsive Thumbnail Images for Wizara Forms

The <foreignObject> element in SVG serves the purpose of embedding non-SVG content, primarily HTML and XML, into an SVG document. Its utility becomes apparent when there's a need to integrate HTML-based elements such as text, images, forms, or even entire web pages within SVG graphics. This feature offers versatility to SVG creators, allowing them to combine the strengths of SVG with other web technologies like CSS and JavaScript.

In terms of syntax, <foreignObject> is typically placed within an <svg> element. It functions as a container for the embedded HTML content. It allows specifying the width and height of the <foreignObject>, thereby determining the size of the content it encapsulates.

The content placed within <foreignObject> can consist of standard HTML and XML elements. When rendered by the user agent, which is usually a web browser, this content behaves as if it were an integral part of the SVG. This means it can be styled and interacted with using CSS and JavaScript, opening up a wide range of possibilities for creating interactive and data-rich visualizations.

In our first SVG-foreignObject test, we're utilizing the <foreignObject> element to seamlessly embed HTML forms from Wizara. This approach allows us to create responsive thumbnail images that serve as interactive previews of the forms.

The HTML forms are nested within the <foreignObject> tags, and when a user hovers their mouse over a thumbnail, we employ CSS to trigger a smooth scaling effect. As a result, the thumbnail expands, and the embedded form becomes more prominent, providing users with an enhanced and interactive viewing experience. The provided CSS code defines styles for an image within an .image-wrapper element and specifies how the image should behave when a user hovers over it.

We've implemented additional CSS styling to ensure that the thumbnails are visually appealing, responsive, and user-friendly. This includes padding, border styling, border-radius for rounded corners, and a background color with a slight transparency effect.

CSS: .image-wrapper { margin-bottom: 1rem; width: 100%; height: 200px; overflow: hidden; border-radius: 0.25rem; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.5); @media (min-width: 992px) { margin-bottom: 0; } } .image-wrapper img { width: 400%; height: 400%; transform: scale(0.25); transform-origin: 0% 0%; transition: all 3s ease; } .image-wrapper img:hover { width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0% 0%; transition: all 1s ease; }

HTML: <div class="wrap mb-5"> <div class="row"> <div class="col-12 col-lg-3"> <div class="image-wrapper"> <img src="bill-of-lading-form.svg" alt="Form Thumbnail"> </div> </div> <div class="col-12 col-lg"> <div class="text-wrapper"> <h3>Demo: Cascade Bill of Lading Form</h3> <p><b>Fields (41): </b>htmlHeading |billTo ... |consigneeName</p> </div> </div> </div> </div>

This combination of SVG, HTML, and CSS techniques results in an engaging user interface where users can interact with the forms by simply hovering over the thumbnail images.

Last Updated: Oct 10, 2023

Wizara Form Samples #1

Demo: Cascade Bill of Lading Form

Demo: Happy Face How Did We Do Form

Demo: Fairway Divorce Survey (Animated)

Using SVG to Create Responsive Thumbnail Images for Wizara Forms

The relationship between the width, height, and scaling properties in this CSS code defines how an image within an .image-wrapper element behaves both initially and on hover. When the page loads, the width and height are set to 320%, enlarging the image to more than three times its original size. Simultaneously, the transform property scales it down to 31.25% of its original size. The key aspect here is that the width and height exaggerate the image's size, while the transform property corrects it by reducing the scale. This setup allows for a precise visual effect. When a user hovers over the image, the width and height increase to 136.25%, visually enlarging the image. The transform property scales it to 75% of its original size, creating a zoom-in effect. The transform-origin ensures that the top-left corner of the image serves as the scaling pivot point, and transitions make these transformations smooth and visually appealing. This interplay between properties results in an engaging interactive experience for users.

We've identified several specific height and width values that are user-friendly, including the necessary decimals required for scaling, as demonstrated in the CSS example below.

CSS: .image-wrapper img { width: 320%; height: 320%; transform: scale(0.3125); transform-origin: top left; transition: all 0.5s ease; } .image-wrapper img:hover { width: 133%; height: 133%; transform: scale(0.7519); transform-origin: top left; transition: all 1s ease; } /* Other height and width percentages with corresponding scale values: 500% = 0.2 450% = 0.2222 400% = 0.25 360% = 0.2778 330% = 0.303 320% = 0.3125 300% = 0.3333 250% = 0.4 200% = 0.5 180% = 0.5556 160% = 0.625 150% = 0.6667 133% = 0.7519 125% = 0.8 100% = 1 */

HTML: <div class="wrap mb-5"> <div class="row"> <div class="col-12 col-lg"> <div class="text-wrapper"> <h3>Bill of Lading Form</h3> <p>A "Bill of Lading" is a legal document issued by a carrier to detail the shipment ... goods. </div> </div> <div class="col-12 col-lg-5"> <div class="image-wrapper"> <img src="bill-of-lading-form.svg" alt="Form Thumbnail"> </div> </div> </div> </div>

Wizara SVG Form Samples #2

Bill of Lading Form

A "Bill of Lading" is a legal document issued by a carrier to detail the shipment of goods. It serves as a receipt, contract, and title deed, confirming the receipt of cargo for shipment, the terms of transportation, and the ownership of the goods. This document is crucial in international trade and shipping, as it outlines the responsibilities of both the shipper and the carrier and acts as proof of delivery and receipt of goods.

How Did We Do Form

The "How Did We Do?" form is a feedback mechanism that allows users to express their satisfaction or dissatisfaction with a service or product. What makes this form unique is its dynamic slider feature, which enables respondents to provide nuanced feedback by adjusting a slider along a scale. This interactive element enhances user engagement and provides valuable insights for improving services or products based on customer feedback.

Fairway Divorce Survey

The "Fairway Divorce Survey" is a comprehensive questionnaire designed to gather valuable insights and opinions. This form stands out due to its extensive list of multiple-choice questions, offering respondents a structured way to provide their feedback or input. It's an efficient tool for collecting specific data and opinions, making it ideal for research, feedback, or data-gathering purposes.