Export SVG with Text for Web

[Federali]

I am new to Affinity, and I am trying to create a SVG for a website. This SVG will be used as paths in the website. The issue that I am encountering is the SVG does not respond to the CSS formatting. I am not sure if I am creating the SVG incorrectly, if some of the export option is generating the issue. Could someone help me with this please? I am attaching the SVG to the message. 

 

 

SVG.txt

[David in Яuislip]

Affinity programs don't recognise CSS. If you open the attached file in a browser you'll see the effects of css. If you open it in Affinity the colours will be gone
So you can use Affinity for your layout then finally add the css with a text editor. Also ensure that there are no clashes between Affinity inline styles and the css definitions

SVG.svg

[v_kyr]

Take a look here in order to get an idea how to handle SVG and CSS:

• SVG and CSS
• SVG Properties and CSS
• ... etc.

Further, the difference between XML attributes and inline CSS properties. In the first example, all of the information is declared as XML attributes, while in the second example, all of the style properties are packaged as inline CSS ...

// XML-Attribute and CSS-inline Style

<circle id="example1"
  cx="50"
  cy="50"
  r="50" 
  fill="#dfac20"
  stroke="#3983ab"
  stroke-width="2" 
/>

<circle id="example2"
  style="cx:50; cy:50; r:50; fill:#dfac20; stroke:#3983ab; stroke-width:2;"
/>

Note: for the above shown (example2) that inline CSS code generally overwrites previously loaded CSS formatting in the HTML head or from external style sheets.

Placing the CSS instructions into a style element ...

<svg>
  <style type="text/css">
    <![CDATA[
      circle {
        cx: 50;
        cy: 50;
        r:  50;
        fill: #dfac20;
        stroke: #3983ab;
        stroke-width: 2;
      }
    ]]>
  </style> 
  <circle id="example3" />
</svg>

----------

Formating basic shapes (circle, triangle, rect) with CSS ...

• The HTML/SVG part ...

  <svg viewBox="0 0 600 250">
  	<circle id="circle" cx="100" cy="100" r="70" />
  	<path id="triangle" d="M200,30 h140 l-70,140 z" />
  	<rect id="rectangle" x="380" y="30" width="140" height="140" /> </svg>

   

• The corresponding CSS part ...

  * {
  	stroke: #306f91;
  	stroke-width: 5;
  }
  
  path {
  	fill: #c32e04;
  }
  
  #rectangle {
  	fill: #dfac20;
  	stroke-width: 10;
  	stroke-opacity: 0.5;
  }

• The result