What is the process for modifying the path and polyline in an SVG file?

I have a pair of SVG icons that I am working with.

Recent Update:

  1. Icon One
  2. Icon Two

One question that I have is whether it is possible to create both icons using the same HTML markup? For instance, can I use something like:

<g>
  <circle ... />
  <path ... />
</g>
?

My main constraint is that I can only work with classes. This means that I want to be able to change their styles using CSS and therefore require the same markup for both icons.

I also need to remove the cx="9" cy="9" from both icons. These attributes are part of the <rect /> element and should be positioned along the edge of the rectangle. Adjusting the cx and cy values causes distortions in the icon. How can I achieve this without breaking the icons? Any assistance would be appreciated. Thank you.

htmlcsssvgjointjs

Answer №1

For those looking to reuse SVG, you can find a helpful answer here: Inline SVG in CSS

CSS offers various options for working with inline SVG elements, such as:

.firstxxx,
.secondxxx {
  position: relative;
  display: block;
  top: -1.1em;
  left: 6em;
}
.secondxxx circle{fill:blue;}

.containerthing {
  height: 4em;
}
<div class="containerthing">1. One
  <svg class="firstxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
    xml:space="preserve">
<defs>
</defs>
<g>
      <circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
      <g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
      </g>
    </g>
</svg>
</div>
<div class="containerthing">2. Two
  <svg class="secondxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
    xml:space="preserve">
<defs>
</defs>
<g>
      <circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
      <g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
      </g>
    </g>
</svg>
</div>

Answer №2

If you're looking to eliminate the cx="9" cy="9" attributes, one solution is to utilize the transform: translate() property

<!-- Generated by Adobe Illustrator 18.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
      <circle magnet="true" fill="#E88585" r="9" transform="translate(9, 9)"></circle>
      <g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
      </g>
    </g>
</svg>

Answer №3

To place the shape in your desired location and link to the SVG using xlink:href within the shape's attribute definition, you can leverage a specific syntax with the JointJS Devs plugin. For example:

joint.shapes.devs.Model.define('app.MyWindow', {
    markup: `<image/><text/>`,
    position: {
      x: 100,
      y: 100
    },
    size: {
      width: 10,
      height: 10
    },
    attrs: {
      image: {
        width: 8,
        height: 8,
        'xlink:href': 'assets/my_svg.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

hint.css guide for inserting line breaks into hints

Is there a way to manually insert line breaks in Hint.css hints? I've attempted using <br>, \n,, and various combinations of them. I've also experimented with the following CSS properties: white-space: normal; word-wrap: break-word; ...

htmlcssline-breakshint

Using Bootstrap's card component, design a grid layout for your website

I am attempting to construct a grid using the Bootstrap 4 card component. After reviewing the documentation and utilizing the card-deck feature, I aim to have each row consist of two columns with the behavior similar to col-12 col-md-6. Additionally, the s ...

htmlcssbootstrap-4

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images

What is the best way to remove CSS styling from a select element?

My select element is displaying blank option values no matter what I do. The dropdown has the correct number of options, but they are all empty. Here's the HTML snippet: <label for="accountBrokerageName">Brokerage:</label> <se ...

htmljquerycss

Exploring how to extract table data using XPath in PHP through continuous loops

Here is an example of the HTML code for a table: <tbody> <tr>..</tr> <tr> <td class="tbl_black_n_1">1</td> <td class="tbl_black_n_1" nowrap="" align="center">23/07/14 08:10</td> <td ...

phphtmlxpath

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

htmlcsssvgwebfrontend

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

Attempting to update data in an HTML table using D3 has proven to be quite challenging for me. My task involves changing the data in multiple columns, adjusting the number of rows, and animating SVG elements in each row based on new data arrays. Despite tr ...

javascripthtmld3.jssvg

The border on a specific field is not showing up when using Django Crispy Forms

Utilizing bootstrap and crispy forms for styling my website has been successful, except for a border issue with the username fields. While all other fields are displayed correctly, the username fields appear without a border as shown in the image below: h ...

htmldjangobootstrap-4django-crispy-forms

Unusual Blank Space in HTML CSS Design

While working on my website, I noticed a peculiar white space appearing at the bottom of the page, but only when using Internet Explorer. Safari looks fine. I am currently using IE8. I would like the white background to end after the black navigation link ...

htmlcss

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...

javascripthtmljquerycsstwitter-bootstrap

Issue with OBJLoader showing a blank screen

Does anyone have experience with rendering OBJ files using three.js? I'm having trouble getting them to display on the screen and would appreciate any help or advice. The strange thing is that a simple cube renders perfectly in my project. For those ...

javascripthtmlthree.jsobjloader

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

cssangularbootstrap-4z-indexopacity

What is the reason behind every element in bootstrap being enclosed within an anchor tag?

I am currently delving into the world of bootstrap for the first time and encountering an issue with the grid system. Somehow, whenever I try to incorporate an - a href="#" - tag within the grid, it distorts the layout inexplicably. I have been struggling ...

phphtmlbootstrap-grid

Creating multiple unique custom attributes for a specialized HTML element

Creating getter/setter methods for a custom attribute on a custom HTML element is quite simple: customElements.define('custom-el', class extends HTMLElement { static get observedAttributes() { return ['customAttr'] ...

javascripthtmlecmascript-6web-componentcustom-tags

Tips for setting background colors as a prop for Material UI cards in React JS

Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card ca ...

javascriptcssreactjsmaterial-uijss

What causes the circular progress bar to disappear when hovering over the MUI React table?

My goal was to create a table with a CircularProgressBar that changes its background color from orange to dark blue when hovering over the row. However, despite my efforts, I couldn't get it to work as intended. Additionally, I wanted the progressBar ...

javascripthtmlcssreactjsmaterial-ui

Positioning Images with CSS Backgrounds

I am looking to create a fluid background that stretches widthwise, while adjusting its height based on the content. If the content is smaller, I want the background to be truncated. However, if there is a lot of information, I would like the background to ...

htmlcss

What is causing a scroll bar to appear at the bottom even though my content is not overflowing?

Here is the situation I am trying to describe: http://jsfiddle.net/CvgFS/1/ My English skills are not strong enough to explain it clearly, but I hope you can see why I am getting a scroll bar even though the content fits the page. This issue is happening o ...

htmlcss

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

javascriptcssangularjs

Difficulty in vertical alignment of inline-block elements

Greetings, I am currently working on creating a Resume in HTML. However, I seem to be facing an issue with the inline-block property as the two div elements that should be placed next to each other are not displaying as expected - one of them appears sligh ...

htmlcss