Ways to incorporate an image into an SVG file

This SVG image that I have created presents a unique design.

<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

       <def>
       </def>
            <g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
                <g id="Group">
                    <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">

                    </circle>
                    <circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">

                    </circle>
                    <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
                </g>
            </g>
</svg>

View the fiddle here: http://jsfiddle.net/9zkfodwp/1377/

I attempted to insert an image inside the circle using a clip-path1, however, the image did not display as expected. The following code snippet shows my approach:

<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

   <def>
            <clipPath id="myCircle">
               <circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
               </circle>
            </clipPath>
   </def>
    <g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
        <g id="Group">
            <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">

            </circle>
             <image width="50" height="35" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
        </g>
    </g>
</svg>

View the modified fiddle here: http://jsfiddle.net/9zkfodwp/1380/

I have a couple of questions regarding this setup:

  1. Why is Chrome not displaying the image correctly in the live preview?

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

  1. The image inserted into the circle does not conform to a circular shape. Instead, it appears as a square within the circle in the fiddle.

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

Shouldn't the rectangular book image fit neatly inside the circle since we are filling the circle with the image?

If you have any insights or suggestions on how to address these issues, I would greatly appreciate your input.

htmlcsssvg

Answer №1

Here are a few issues I noticed with your fiddle:

  1. The correct tag is <defs>, not <def>. The entire section was not being recognized.
  2. Your image and clip path circle were not aligned properly. They were not overlapping each other. I have adjusted the positioning of the <image> to center it over the clip path circle.

<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <clipPath id="myCircle">
      <circle id="Oval" cx="171" cy="31" r="16"/>
    </clipPath>
  </defs>

  <g id="i-define-a-black-ring-yellow" fill="#img10"  transform="translate(20.000000, 20.000000)">
    <g id="Group">
      <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100"/>
      <image x="146" y="14" width="50" height="35"
             xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
             clip-path="url(#myCircle)" />
      <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
    </g>
  </g>

</svg>

Answer №2

Are you attempting to achieve this?

If you want to flip the image on the x-y axis, you can accomplish that by applying scaling and transformation.

Take a look at this code:

<svg width="350px" height="350px" viewBox="0 0 350 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

   <def>
            <clipPath id="myCircle">
               <circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
               </circle>
            </clipPath>
   </def>
    <g id="i-define-a-black-ring-yellow" fill="#img10" transform="translate(20.000000, 20.000000)">
        <g id="Group" >
            <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">

            </circle>
             <image width="50" height="35" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" transform="scale (-1, 1) translate(-60, 45)" />
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
        </g>
    </g>
</svg>

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

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson

The standard jQuery Mobile CSS styling does not seem to be working across various browsers, extensive testing has been conducted

I'm currently experimenting with jQuery Mobile to enhance my skills, but I'm facing issues with applying the basic CSS styling. I have included the css link from the jQuery Mobile website and ensured that I am connected to the internet. However, ...

jqueryhtmlcssjquery-mobile

Exploring the attributes used in AngularJS directives

I have been exploring AngularJS and noticed that it introduces unique attributes that do not follow the standard HTML attribute format, such as: <html ng-app> or <body ng-controller="PhoneListCtrl"> Where do these ng-* attributes originate ...

htmlangularjs

The functionality of Angular Datepicker is disrupted when scrolling through the page

Coding in HTML <div class="col-5 col-md-3 px-0 daterange-picker"> <div class="form-group"> <div class="input-group"> <input type="text" id="second ...

javascripthtmlcssangularangular-ui-bootstrap

The Ultimate Guide to Setting up SVG's Viewbox, Width, and Height for Scalability and Responsiveness

As a beginner in SVG design, I find it challenging to scale, zoom in/out with the container and ensure responsiveness across different devices. I wonder if it's possible to create an SVG that adapts to all device sizes and effectively handles browsin ...

htmlcsssvg

Tips for including background pictures in the jumbotron using bootstrap

I've recently delved into bootstrap just a couple of days ago. Now, I'm encountering an issue where I can't seem to add a background image to my entire webpage or even the jumbotron specifically. I've attempted to directly input the pa ...

csshtmltwitter-bootstrapbackground

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

Using React and CSS. I have set up my application to display a faded image on hover, with text that fades in over it. However, I am facing an issue where touching the text with my cursor removes the fade effect. Does anyone have a solution for preventing ...

javascripthtmlcssreactjswebkit

Which Express.js template allows direct usage of raw HTML code?

I am in search of a template that utilizes pure HTML without any alterations to the language, similar to Jade but keeping the HTML as is. The reason behind this inquiry is: I prefer the simplicity and clarity of HTML I would like to be able to easily vi ...

javascripthtmlnode.jsexpresspug

Empty Github page displayed on individual professional website

Hello everyone, I am new to development. I recently put together my own personal portfolio and stored it in this GitHub repository -> https://github.com/LuisssM/Portfolio. However, when I try to launch the website at , it shows the content of the read-m ...

htmlreactjsgithubgithub-pages

Issue with combining overflow-x, Firefox, and JavaScript

In Firefox, an issue arises that does not occur in other browsers. To see the problem in action, please visit this example page: -removed- Try selecting a page other than the home page. The window will scroll to your selection. You can then scroll down u ...

javascriptjquerycssfirefoxscrollto

Tricks for refreshing cached web page assets in the year 2023

So far, here are some of the old Cache Buster techniques I've come across: Adding a query string in the link src: /mstylesheet.css?cache_buster=12345 Changing the filename each time: /mstylesheet-12345.css Using Apache with Cache-Control "must-revali ...

javascripthtmlcssbrowser-cache

Words within a string are divided in the center, with JS and CSS involved

I'm currently working on developing a hangman game in JavaScript (I am new to web technologies) and I have come across my first challenge. The placeholder string for the word to be guessed, which consists of hyphens and spaces, is overflowing from the ...

javascriptcsscss-hyphens

Glitchy/Crazy CSS3 Animations

Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works: I apply the .preanimate class to rotate the phasing out di ...

javascriptjquerycsscss-transitionscss-animations

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...

pythonhtmldjango

CSS: Avoiding text overflow in a div container

Utilizing Bootstrap 4, I have a div containing lengthy text that causes overflow within the element. The issue is depicted in this image example. By introducing spaces to shorten words, the text displays correctly without overflowing. However, extended ...

htmlcssbootstrap-4

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

htmlcss

Tips for receiving notifications when the Collapsible collapses

I'm having trouble figuring out how to receive notifications when the Collapsible is expanded and collapsed. Currently, I am not receiving any type of notification. Any suggestions on how to make this work? Below is my code: --Imported jQuery < ...

javascriptjquerycsshtml

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular

I am currently working with a template-driven form and facing an issue. Despite receiving true or false values, I actually need to retrieve the value of checkboxes. <form #f = "ngForm" (ngSubmit) = "onClickSubmit(f.value)"> ...

htmlangulartypescript

Replacing elements with preg_replace in HTML including diacritics

Can someone assist me in using preg_replace for the following scenario: <p style="background:white"> <span style="font-size:10.0pt;font-family:&quot;Trebuchet MS&quot;,&quot;sans-serif&quot;"> Coût de la prestation : 43.19 . ...

phphtmlpreg-replacediacritics

Enhancing the appearance of the Switcher by framing it with

I've been working with the component package https://www.npmjs.com/package/react-switch-selector to create a design similar to this https://i.stack.imgur.com/voHqm.png Although I have made some progress, I'm struggling to add a border outline. H ...

htmlcssreactjssassborder