Responsive landing page using Tailwind CSS

Community feedback

• 

  IryDev•1,580

  @IryDevPosted over 1 year ago

  Hey @barterkamp, well done for completing this challenge 😄

  Using SVGs in HTML can indeed be a bit tricky, but with a little guidance, you'll be able to seamlessly integrate them into your projects. Here are some steps to consider:

  • Inline SVG: You can directly include SVG code within your HTML file using the <svg> tag. This gives you full control over the SVG's properties and allows you to style it with CSS just like any other HTML element.

    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" />
    </svg>
    

  • External SVG: You can also use external SVG files and include them in your HTML using the <img> tag. This keeps your HTML cleaner and allows for reusability of SVGs across multiple pages.

    <img src="path-to-your-svg-file.svg" alt="An SVG image" />
    

  3. CSS Background: Another approach is to use SVGs as background images through CSS. This can be useful for decorative elements or icons.

     .icon {
       background-image: url('path-to-your-svg-file.svg');
       /* Set width and height if necessary */
       width: 24px;
       height: 24px;
     }
     

  I hope you'll find this helpful😄

  0

  ---

  

  C4rlos•410

  @solracssPosted about 1 year ago

  @IryDev with external svg we are not able to change properties, aren't we? Like fill, stroke etc?

  0