-1

I have created one svg shape. I want the slope to start from middle. I tried,but I don't know how to make it. Can anyone please help me.

<svg xmlns="http://www.w3.org/2000/svg" fill="none">
      <g filter="url(#filter0_b_1_2556)">
        <path
          d="M176.291 1H1V115C1 120.523 5.47716 125 11 125H331C336.523 125 341 120.523 341 115V37.4083H213.78C210.647 37.4083 207.695 35.9399 205.805 33.4411L184.266 4.96721C182.376 2.46844 179.424 1 176.291 1Z"
          fill="#5B85A4"
          fillOpacity="0.80"
        />
        <path
          d="M176.291 1H1V115C1 120.523 5.47716 125 11 125H331C336.523 125 341 120.523 341 115V37.4083H213.78C210.647 37.4083 207.695 35.9399 205.805 33.4411L184.266 4.96721C182.376 2.46844 179.424 1 176.291 1Z"
          stroke="white"
          strokeOpacity="0.9"
        />
      </g>
      <defs>
        <filter
          id="filter0_b_1_2556"
          x="-53.5"
          y="-53.5"
          width="449"
          height="233"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImageFix" stdDeviation="27" />
          <feComposite
            in2="SourceAlpha"
            operator="in"
            result="effect1_backgroundBlur_1_2556"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_backgroundBlur_1_2556"
            result="shape"
          />
        </filter>
      </defs>
    </svg>

enter image description here

Improve this question
5
  • 2
    Use an SVG editor such as Inkscape to draw whatever you want.
    – Robert Longson
    Commented Jul 8 at 7:34
  • 1
    It's puzzling why people don't use software that are de facto free to solve these types of "problems"... They just get involved in the programmatically drawing of vectors... As colleague mentioned above, you have free software, or you can do it online oneOfMany... easier, faster and probably better.
    – Łukasz D. Mastalerz
    Commented Jul 8 at 8:01
  • @RobertLongson, Thanks for mentioning the software.
    – Rural Smack
    Commented Jul 8 at 8:09
  • 2
    My fave is BoxySVG
    – Brett Donald
    Commented Jul 8 at 8:12
  • For a single d-path: yqnn.github.io/svg-path-editor/#
    – Danny '365CSI' Engelman
    Commented Jul 8 at 8:58

2 Answers 2

Reset to default
1

Clean up your SVG by deleting all unrequired stuff
(by trial and error first, you will learn SVG along the way)

Remove precision and convert to a relative path with: https://yqnn.github.io/svg-path-editor/#

Add a contrasting background color

Set a proper viewBox width and height

Change the (Horizontal) -166 value to adjust (your path was/is drawn counter-clockwise)

svg {
  width:200px;
  background:hotpink;
}
<svg viewBox="0 0 342 126">
  <path d="m1 1v114c0 6 4 10 10 10h320c6 0 10-4 10-10v-78h  -166  c-3 0-6-1-8-4l-22-28c-2-3-5-4-8-4z" 
        fill="#5B85A4" 
        fillOpacity="0.80" 
        stroke="blue" 
        strokeOpacity="0.9" />
</svg>
<svg viewBox="0 0 342 126">
  <path d="m1 1v114c0 6 4 10 10 10h320c6 0 10-4 10-10v-78h  -200  c-3 0-6-1-8-4l-22-28c-2-3-5-4-8-4z" 
        fill="#5B85A4" 
        fillOpacity="0.80" 
        stroke="blue" 
        strokeOpacity="0.9" />
</svg>
<svg viewBox="0 0 342 126">
  <path d="m1 1v114c0 6 4 10 10 10h320c6 0 10-4 10-10v-78h  -20  c-3 0-6-1-8-4l-22-28c-2-3-5-4-8-4z" 
        fill="#5B85A4" 
        fillOpacity="0.80" 
        stroke="blue" 
        strokeOpacity="0.9" />
</svg>

Improve this answer
0

To ensure the slope starts exactly from the middle of the top edge, need to adjust the path coordinates carefully. The middle of the top edge is determined by the width of the SVG. If the SVG width is 342 (since it ends at x=341), the middle would be at x=171.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="342" height="126">
  <g filter="url(#filter0_b_1_2556)">
    <path
      d="M171 1H1V115C1 120.523 5.47716 125 11 125H331C336.523 125 341 120.523 341 115V37.4083H213.78C210.647 37.4083 207.695 35.9399 205.805 33.4411L184.266 4.96721C182.376 2.46844 179.424 1 176.291 1H171Z"
      fill="#5B85A4"
      fillOpacity="0.80"
    />
    <path
      d="M171 1H1V115C1 120.523 5.47716 125 11 125H331C336.523 125 341 120.523 341 115V37.4083H213.78C210.647 37.4083 207.695 35.9399 205.805 33.4411L184.266 4.96721C182.376 2.46844 179.424 1 176.291 1H171Z"
      stroke="white"
      strokeOpacity="0.9"
    />
  </g>
  <defs>
    <filter
      id="filter0_b_1_2556"
      x="-53.5"
      y="-53.5"
      width="449"
      height="233"
      filterUnits="userSpaceOnUse"
      colorInterpolationFilters="sRGB"
    >
      <feFlood floodOpacity="0" result="BackgroundImageFix" />
      <feGaussianBlur in="BackgroundImageFix" stdDeviation="27" />
      <feComposite
        in2="SourceAlpha"
        operator="in"
        result="effect1_backgroundBlur_1_2556"
      />
      <feBlend
        mode="normal"
        in="SourceGraphic"
        in2="effect1_backgroundBlur_1_2556"
        result="shape"
      />
    </filter>
  </defs>
</svg>

The path now starts at M171 1, which is the middle of the top edge for an SVG width of 342.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.